<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#333">
    <title>Material Style</title>
    <meta name="description" content="Material Style Theme">
    <link rel="shortcut icon" href="assets/img/favicon-v=3.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="assets/css/preload.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.light-blue-500.min.css">
    <link rel="stylesheet" href="assets/css/width-boxed.min.css" id="ms-boxed" disabled="">
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
        <script src="assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="javascript:void(0)" class="ms-conf-btn ms-configurator-btn btn-circle btn-circle-raised btn-circle-primary animated rubberBand">
      <i class="fa fa-gears"></i>
    </a>
    <div id="ms-configurator" class="ms-configurator">
      <div class="ms-configurator-title">
        <h3>
          <i class="fa fa-gear"></i> Theme Configurator</h3>
        <a href="javascript:void(0);" class="ms-conf-btn withripple">
          <i class="zmdi zmdi-close"></i>
        </a>
      </div>
      <div class="panel-group" id="accordion_conf" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-color">
            <h4 class="panel-title">
              <a role="button" class="withripple" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-1" aria-expanded="true" aria-controls="ms-collapse-conf-1">
                <i class="zmdi zmdi-invert-colors"></i> Color Selector </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-1" class="card-collapse collapse show" role="tabpanel" aria-labelledby="ms-conf-header-color">
            <div class="panel-body">
              <div id="color-options" class="ms-colors-container">
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary red" data-color="red">red</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary pink" data-color="pink">pink</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary purple" data-color="purple">purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-purple" data-color="deep-purple">deep-purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary indigo" data-color="indigo">indigo</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue" data-color="blue">blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-blue active" data-color="light-blue">light-blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary cyan" data-color="cyan">cyan</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary teal" data-color="teal">teal</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary green" data-color="green">green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-green" data-color="light-green">light-green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary lime" data-color="lime">lime</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary yellow" data-color="yellow">yellow</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary amber" data-color="amber">amber</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary orange" data-color="orange">orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-orange" data-color="deep-orange">deep-orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary brown" data-color="brown">brown</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary grey" data-color="grey">grey</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue-grey" data-color="blue-grey">blue-grey</a>
              </div>
              <div id="grad-options" class="ms-color-shine">
                <h4 class="no-mb text-center">Color Brightness</h4>
                <span>300</span>
                <span>400</span>
                <span>500</span>
                <span>600</span>
                <span>700</span>
                <span>800</span>
                <a href="javascript:void(0)" data-shine=300 class="ms-color-box grad c300 light-blue">300</a>
                <a href="javascript:void(0)" data-shine=400 class="ms-color-box grad c400 light-blue">400</a>
                <a href="javascript:void(0)" data-shine=500 class="ms-color-box grad c500 light-blue active">500</a>
                <a href="javascript:void(0)" data-shine=600 class="ms-color-box grad c600 light-blue">600</a>
                <a href="javascript:void(0)" data-shine=700 class="ms-color-box grad c700 light-blue">700</a>
                <a href="javascript:void(0)" data-shine=800 class="ms-color-box grad c800 light-blue">800</a>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-headers">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-2" aria-expanded="false" aria-controls="ms-collapse-conf-2">
                <i class="zmdi zmdi-view-compact"></i> Header Styles </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-2" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-headers">
            <div class="panel-body">
              <!--<h5>Preset Options</h5>
                    <form class="form-inverse ms-conf-radio">
                        <div class="form-group">
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">Default Style
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Pure Material
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">Navbar Mode
                                </label>
                            </div>
                        </div>
                    </form>
                    <h5>Custom Header</h5>-->
              <h6>Header Options</h6>
              <form class="form-inverse ms-conf-radio" id="header-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="whiteHeader" value="white" checked="cheked"> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="primaryHeader" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="darkHeader" value="dark"> Dark Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="noHeader" value="hidden"> No Header (Navbar Mode) </label>
                  </div>
                </div>
              </form>
              <h6>Navbar Options</h6>
              <form class="form-inverse ms-conf-radio" id="navbar-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="whiteNavbar" value="white" checked=""> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="primaryNavbar" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="darkNavbar" value="dark"> Dark Color </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-container">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-conf-collapse-3" aria-expanded="false" aria-controls="ms-conf-collapse-3">
                <i class="zmdi zmdi-grid"></i> Container Options </a>
            </h4>
          </div>
          <div id="ms-conf-collapse-3" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-container">
            <div class="panel-body">
              <form class="form-inverse ms-conf-radio" id="boxed-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="fullWidth" value="full" checked=""> Full Width </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="boxedWidth" value="boxed"> Boxed Mode </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="ms-preload" class="ms-preload">
      <div id="status">
        <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
        </div>
      </div>
    </div>
    <div class="ms-site-container">
      <!-- Modal -->
      <div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog animated zoomIn animated-3x" role="document">
          <div class="modal-content">
            <div class="modal-header d-block shadow-2dp no-pb">
              <button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
                  <i class="zmdi zmdi-close"></i>
                </span>
              </button>
              <div class="modal-title text-center">
                <span class="ms-logo ms-logo-white ms-logo-sm mr-1">M</span>
                <h3 class="no-m ms-site-title">Material
                  <span>Style</span>
                </h3>
              </div>
              <div class="modal-header-tabs">
                <ul class="nav nav-tabs nav-tabs-full nav-tabs-3 nav-tabs-primary" role="tablist">
                  <li class="nav-item" role="presentation">
                    <a href="#ms-login-tab" aria-controls="ms-login-tab" role="tab" data-toggle="tab" class="nav-link active withoutripple">
                      <i class="zmdi zmdi-account"></i> Login</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a href="#ms-register-tab" aria-controls="ms-register-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                      <i class="zmdi zmdi-account-add"></i> Register</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a href="#ms-recovery-tab" aria-controls="ms-recovery-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                      <i class="zmdi zmdi-key"></i> Recovery Pass</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="modal-body">
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
                  <form autocomplete="off">
                    <fieldset>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-account"></i>
                          </span>
                          <label class="control-label" for="ms-form-user">Username</label>
                          <input type="text" id="ms-form-user" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass">Password</label>
                          <input type="password" id="ms-form-pass" class="form-control"> </div>
                      </div>
                      <div class="row mt-2">
                        <div class="col-md-6">
                          <div class="form-group no-mt">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox"> Remember Me </label>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <button class="btn btn-raised btn-primary pull-right">Login</button>
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <div class="text-center">
                    <h3>Login with</h3>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-facebook">
                      <i class="zmdi zmdi-facebook"></i> Facebook</a>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-twitter">
                      <i class="zmdi zmdi-twitter"></i> Twitter</a>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-google">
                      <i class="zmdi zmdi-google"></i> Google</a>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="ms-register-tab">
                  <form>
                    <fieldset>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-account"></i>
                          </span>
                          <label class="control-label" for="ms-form-user-new">Username</label>
                          <input type="text" id="ms-form-user-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-email"></i>
                          </span>
                          <label class="control-label" for="ms-form-email-new">Email</label>
                          <input type="email" id="ms-form-email-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass-new">Password</label>
                          <input type="password" id="ms-form-pass-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass-re-new">Re-type Password</label>
                          <input type="password" id="ms-form-pass-re-new" class="form-control"> </div>
                      </div>
                      <button class="btn btn-raised btn-block btn-primary">Register Now</button>
                    </fieldset>
                  </form>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
                  <fieldset>
                    <div class="form-group label-floating">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="zmdi zmdi-account"></i>
                        </span>
                        <label class="control-label" for="ms-form-user-re">Username</label>
                        <input type="text" id="ms-form-user-re" class="form-control"> </div>
                    </div>
                    <div class="form-group label-floating">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="zmdi zmdi-email"></i>
                        </span>
                        <label class="control-label" for="ms-form-email-re">Email</label>
                        <input type="email" id="ms-form-email-re" class="form-control"> </div>
                    </div>
                    <button class="btn btn-raised btn-block btn-primary">Send Password</button>
                  </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <header class="ms-header ms-header-primary">
        <!--ms-header-primary-->
        <div class="container container-full">
          <div class="ms-title">
            <a href="index.html">
              <!-- <img src="assets/img/demo/logo-header.png" alt=""> -->
              <span class="ms-logo animated zoomInDown animation-delay-5">M</span>
              <h1 class="animated fadeInRight animation-delay-6">Material
                <span>Style</span>
              </h1>
            </a>
          </div>
          <div class="header-right">
            <div class="share-menu">
              <ul class="share-menu-list">
                <li class="animated fadeInRight animation-delay-3">
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                </li>
                <li class="animated fadeInRight animation-delay-2">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                </li>
                <li class="animated fadeInRight animation-delay-1">
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                </li>
              </ul>
              <a href="javascript:void(0)" class="btn-circle btn-circle-primary animated zoomInDown animation-delay-7">
                <i class="zmdi zmdi-share"></i>
              </a>
            </div>
            <a href="javascript:void(0)" class="btn-circle btn-circle-primary no-focus animated zoomInDown animation-delay-8" data-toggle="modal" data-target="#ms-account-modal">
              <i class="zmdi zmdi-account"></i>
            </a>
            <form class="search-form animated zoomInDown animation-delay-9">
              <input id="search-box" type="text" class="search-input" placeholder="Search..." name="q" />
              <label for="search-box">
                <i class="zmdi zmdi-search"></i>
              </label>
            </form>
            <a href="javascript:void(0)" class="btn-ms-menu btn-circle btn-circle-primary ms-toggle-left animated zoomInDown animation-delay-10">
              <i class="zmdi zmdi-menu"></i>
            </a>
          </div>
        </div>
      </header>
      <nav class="navbar navbar-expand-md  navbar-static ms-navbar ms-navbar-primary">
        <div class="container container-full">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
              <!-- <img src="assets/img/demo/logo-navbar.png" alt=""> -->
              <span class="ms-logo ms-logo-sm">M</span>
              <span class="ms-title">Material
                <strong>Style</strong>
              </span>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="ms-navbar">
            <ul class="navbar-nav">
              <li class="nav-item dropdown active">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="home">Home
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="ms-tab-menu">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs ms-tab-menu-left" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" href="#tab-general" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-home"></i> General Purpose</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-landing" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-desktop-windows"></i> Landing pages</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-revolution" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-panorama-horizontal"></i> Slider Revolution</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-shop" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-store"></i> Shop</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-profile" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-account"></i> Professional Profile</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-blog" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-edit"></i> Blog Template</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-magazine" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-flip"></i> Magazine Template</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-app" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-smartphone-iphone"></i> App Pages</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-ads" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-search"></i> Classified Ads</a>
                      </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content ms-tab-menu-right">
                      <div class="tab-pane active" id="tab-general" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="index.html">Default Home</a>
                          </li>
                          <li>
                            <a href="home-generic-2.html">Home Black Slider</a>
                          </li>
                          <li>
                            <a href="home-generic-3.html">Home Browsers Intro</a>
                          </li>
                          <li>
                            <a href="home-generic-4.html">Home Mobile Intro</a>
                          </li>
                          <li>
                            <a href="home-generic-5.html">Home Material Icons</a>
                          </li>
                          <li>
                            <a href="home-generic-6.html">Home Typed Hero</a>
                          </li>
                          <li>
                            <a href="home-generic-7.html">Home Typed Hero 2</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-landing" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-landing.html">Home Landing Intro</a>
                          </li>
                          <li>
                            <a href="home-landing2.html">Home Landing Intro 2</a>
                          </li>
                          <li>
                            <a href="home-landing4.html">Home Landing Intro 3</a>
                          </li>
                          <li>
                            <a href="home-landing3.html">Home Landing Video</a>
                          </li>
                          <li>
                            <a href="home-cv3.html">Home Profile Landing 1</a>
                          </li>
                          <li>
                            <a href="home-cv4.html">Home Profile Landing 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Landing Video 2 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-revolution" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a class="with-badge" href="home-revolution.html">Home Revolution Devices
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution2.html">Home Revolution App
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution3.html">Home Revolution Video
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution4.html">Home Revolution Idea
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-shop" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-shop.html">Home Shop 1</a>
                          </li>
                          <li>
                            <a href="home-shop2.html">Home Shop 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Shop 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Shop 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-profile" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-cv.html">Home Profile 1</a>
                          </li>
                          <li>
                            <a href="home-cv2.html">Home Profile 2</a>
                          </li>
                          <li>
                            <a href="home-cv3.html">Home Profile Landing 1</a>
                          </li>
                          <li>
                            <a href="home-cv4.html">Home Profile Landing 2</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-blog" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-blog.html">Home Blog 1</a>
                          </li>
                          <li>
                            <a href="home-blog2.html">Home Blog 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Blog 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Blog 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-magazine" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-magazine.html">Home Magazine 1</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 2 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-app" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-app.html">Home App 1</a>
                          </li>
                          <li>
                            <a href="home-app2.html">Home App 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home App 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home App 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-ads" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-class.html">Home Classifieds 1</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Classifieds 2 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Classifieds 3 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="page">Pages
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="dropdown-item has_children">About us &amp; Team</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-about.html">About us Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about2.html">About us Option 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about3.html">About us Option 3</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about4.html">About us Option 4</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-team.html">Our Team Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-team2.html">Our Team Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Form</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="page-contact.html">Contact Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-contact2.html">Contact Option 2</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-login_register.html">Login &amp; Register</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-login.html">Login Full</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-login2.html">Login Integrated</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-login_register2.html">Register Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-register2.html">Register Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Profiles</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-profile.html">User Profile Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-profile2.html">User Profile Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Error</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-404.html">Error 404 Full Page</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-404_2.html">Error 404 Integrated</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-500.html">Error 500 Full Page</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-500_2.html">Error 500 Integrated</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Bussiness &amp; Products</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-testimonial.html">Testimonials</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-clients.html">Our Clients</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-product.html">Products</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-services.html">Services</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Pricing</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-pricing.html">Pricing Box</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-pricing2.html">Pricing Box 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-princing_table.html">Pricing Mega Table</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">FAQ &amp; Support</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-support.html">Support Center</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-faq.html">FAQ Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-faq2.html">FAQ Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Coming Soon</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-coming.html">Coming Soon Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-coming2.html">Coming Soon Option 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-coming3.html">Coming Soon Option 3</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Timeline</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-timeline_left.html">Timeline Left</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-timeline_left2.html">Timeline Left 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-timeline.html">Timeline Center</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Email Templates</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item with-badge" href="page-email.html">Email Template 1
                          <span class="badge badge-success text-right">1.2</span>
                        </a>
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item with-badge" href="page-email2.html">Email Template 2
                          <span class="badge badge-success text-right">1.2</span>
                        </a>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="page-all.html" class="dropdown-link">All Pages</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown dropdown-megamenu-container">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="component">UI Elements
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-megamenu animated fadeIn animated-2x">
                  <li class="container">
                    <div class="row">
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-bold"></i> Bootstrap CSS</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-typography.html">
                                <i class="fa fa-font"></i> Typography</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-headers.html">
                                <i class="fa fa-header"></i> Headers</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-dividers.html">
                                <i class="fa fa-arrows-h"></i> Dividers</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-blockquotes.html">
                                <i class="fa fa-quote-right"></i> Blockquotes</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-forms.html">
                                <i class="fa fa-check-square-o"></i> Forms
                                <span class="badge badge-info pull-right">
                                  <i class="zmdi zmdi-long-arrow-up no-mr"></i> 1.5</span>
                              </a>
                            </li>
                            <li>
                              <a class="withripple" href="component-tables.html">
                                <i class="fa fa-table"></i> Tables</a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-hand-o-up"></i> Buttons</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-basic-buttons.html">
                                <i class="fa fa-arrow-circle-right"></i> Basic Buttons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-buttons-components.html">
                                <i class="fa fa-arrow-circle-right"></i> Buttons Components</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-social-buttons.html">
                                <i class="fa fa-arrow-circle-right"></i> Social Buttons
                                <span class="badge badge-info pull-right">
                                  <i class="zmdi zmdi-long-arrow-up no-mr"></i> 1.3</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-list-alt"></i> Basic Components</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-panels.html">
                                <i class="zmdi zmdi-view-agenda"></i> Panels</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-alerts.html">
                                <i class="zmdi zmdi-info"></i> Alerts &amp; Wells</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-badges.html">
                                <i class="zmdi zmdi-tag"></i> Badges &amp; Badges Pills</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-lists.html">
                                <i class="zmdi zmdi-view-list"></i> Lists</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-thumbnails.html">
                                <i class="zmdi zmdi-image-o"></i> Thumbnails</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-carousels.html">
                                <i class="zmdi zmdi-view-carousel"></i> Carousels</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-modals.html">
                                <i class="zmdi zmdi-window-maximize"></i> Modals</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-tooltip.html">
                                <i class="zmdi zmdi-pin-help"></i> Tooltip &amp; Popover</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-progress-bars.html">
                                <i class="zmdi zmdi-view-headline"></i> Progress Bars</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-pagination.html">
                                <i class="zmdi zmdi-n-2-square"></i> Pagination</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-dropdowns.html">
                                <i class="fa fa-info"></i> Dropdowns</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="zmdi zmdi-folder-star-alt"></i> Extra Components</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-cards.html">
                                <i class="zmdi zmdi-card-membership"></i> Cards</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-composite-cards.html">
                                <i class="zmdi zmdi-card-giftcard"></i> Composite Cards</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-counters.html">
                                <i class="zmdi zmdi-n-6-square"></i> Counters</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-audio-video.html">
                                <i class="zmdi zmdi-play-circle"></i> Audio &amp; Video</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-masonry.html">
                                <i class="zmdi zmdi-view-dashboard"></i> Masonry Layer</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-snackbar.html">
                                <i class="zmdi zmdi-notifications-active"></i> SnackBar
                                <span class="badge badge-success pull-right">1.2</span>
                              </a>
                            </li>
                            <li>
                              <a class="withripple" href="component-lightbox.html">
                                <i class="zmdi zmdi-collection-image-o"></i> Lightbox
                                <span class="badge badge-success pull-right">1.5</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="zmdi zmdi-tab"></i> Collapses &amp; Tabs</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-collapses.html">
                                <i class="zmdi zmdi-view-day"></i> Collapses</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-horizontal-tabs.html">
                                <i class="zmdi zmdi-tab"></i> Horitzontal Tabs</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-vertical-tabs.html">
                                <i class="zmdi zmdi-menu"></i> Vertical Tabs</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-briefcase"></i> Icons</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-icons-basic.html">
                                <i class="fa fa-arrow-circle-right"></i> Basic Icons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-fontawesome.html">
                                <i class="fa fa-arrow-circle-right"></i> Font Awesome</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-iconic.html">
                                <i class="fa fa-arrow-circle-right"></i> Material Design Iconic</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-glyphicons.html">
                                <i class="fa fa-arrow-circle-right"></i> Glyphicons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-ionicons.html">
                                <i class="fa fa-arrow-circle-right"></i> Ionicons
                                <span class="badge badge-success pull-right">2.0</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-area-chart"></i> Charts</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-charts-circle.html">
                                <i class="zmdi zmdi-chart-donut"></i> Circle Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-bar.html">
                                <i class="fa fa-bar-chart"></i> Bars Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-line.html">
                                <i class="fa fa-line-chart"></i> Line Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-more.html">
                                <i class="fa fa-pie-chart"></i> More Charts</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="blog">Blog
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="blog-sidebar.html">
                      <i class="zmdi zmdi-view-compact"></i> Blog Sidebar 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-sidebar2.html">
                      <i class="zmdi zmdi-view-compact"></i> Blog Sidebar 2</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-masonry.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Blog Masonry 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-masonry2.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Blog Masonry 2</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-full.html">
                      <i class="zmdi zmdi zmdi-view-stream"></i> Blog Full Page 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-full2.html">
                      <i class="zmdi zmdi zmdi-view-stream"></i> Blog Full Page 2</a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="blog-post.html">
                      <i class="zmdi zmdi-file-text"></i> Blog Post 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-post2.html">
                      <i class="zmdi zmdi-file-text"></i> Blog Post 2</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-8" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="portfolio">Portfolio
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_sidebar.html">
                      <i class="zmdi zmdi-view-compact"></i> Portfolio Sidebar Filters</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_topbar.html">
                      <i class="zmdi zmdi-view-agenda"></i> Portfolio Topbar Filters</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_sidebar_fluid.html">
                      <i class="zmdi zmdi-view-compact"></i> Portfolio Sidebar Fluid</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_topbar_fluid.html">
                      <i class="zmdi zmdi-view-agenda"></i> Portfolio Topbar Fluid</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-cards.html">
                      <i class="zmdi zmdi-card-membership"></i> Porfolio Cards</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-masonry.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Porfolio Masonry</a>
                  </li>
                  <li>
                    <a class="dropdown-item with-badge" href="portfolio-gallery.html">
                      <i class="zmdi zmdi-apps"></i> Picture Gallery
                      <span class="badge badge-success text-right">1.5</span>
                    </a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="portfolio-item.html">
                      <i class="zmdi zmdi-collection-item-1"></i> Portfolio Item 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-item2.html">
                      <i class="zmdi zmdi-collection-item-2"></i> Portfolio Item 2</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-9" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="ecommerce">E-Commerce
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters.html">E-Commerce Sidebar</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters-full.html">E-Commerce Sidebar Full</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters-full2.html">E-Commerce Topbar Full</a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-item.html">E-Commerce Item</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-cart.html">E-Commerce Cart</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu">
            <i class="zmdi zmdi-menu"></i>
          </a>
        </div>
        <!-- container -->
      </nav>
      <div class="material-background"></div>
      <div class="container container-full">
        <div class="ms-paper">
          <div class="row">
            <div class="col-lg-3 ms-paper-menu-left-container">
              <div class="ms-paper-menu-left">
                <h3 class="ms-paper-menu-title">
                  <i class="zmdi zmdi-apps"></i> Components Menu
                  <a role="button" data-toggle="collapse" href="#collapseMenu" aria-expanded="false" aria-controls="collapseMenu" class="withripple">
                    <i class="zmdi zmdi-menu"></i>
                  </a>
                </h3>
                <div class="panel-menu collapse" id="collapseMenu">
                  <ul class="panel-group ms-collapse-nav" id="components-nav" role="tablist" aria-multiselectable="true">
                    <li class="card" role="tab" id="e1">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c1" aria-expanded="true" aria-controls="c1" class="collapsed withripple">
                        <i class="fa fa-bold"></i> Bootstrap CSS</a>
                      <ul id="c1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e1">
                        <li>
                          <a class="withripple" href="component-typography.html">
                            <i class="fa fa-font"></i> Typography</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-headers.html">
                            <i class="fa fa-header"></i> Headers</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-dividers.html">
                            <i class="fa fa-arrows-h"></i> Dividers</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-blockquotes.html">
                            <i class="fa fa-quote-right"></i> Blockquotes</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-forms.html">
                            <i class="fa fa-check-square-o"></i> Forms</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-tables.html">
                            <i class="fa fa-table"></i> Tables</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e2">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c2" aria-expanded="true" aria-controls="c2" class="collapsed withripple">
                        <i class="fa fa-hand-o-up"></i> Buttons</a>
                      <ul id="c2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e2">
                        <li>
                          <a class="withripple" href="component-basic-buttons.html">
                            <i class="fa fa-arrow-circle-right"></i> Basic Buttons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-buttons-components.html">
                            <i class="fa fa-arrow-circle-right"></i> Buttons Components</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-social-buttons.html">
                            <i class="fa fa-arrow-circle-right"></i> Social Buttons</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e3">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c3" aria-expanded="true" aria-controls="c3" class="withripple">
                        <i class="fa fa-briefcase"></i> Icons</a>
                      <ul id="c3" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="e3">
                        <li>
                          <a class="withripple" href="component-icons-basic.html">
                            <i class="fa fa-arrow-circle-right"></i> Basic Icons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-fontawesome.html">
                            <i class="fa fa-arrow-circle-right"></i> Font Awesome</a>
                        </li>
                        <li>
                          <a class="withripple active" href="component-icons-iconic.html">
                            <i class="fa fa-arrow-circle-right"></i> Material Design Iconic</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-glyphicons.html">
                            <i class="fa fa-arrow-circle-right"></i> Glyphicons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-ionicons.html">
                            <i class="fa fa-arrow-circle-right"></i> Ionicons</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e4">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c4" aria-expanded="true" aria-controls="c4" class="collapsed withripple">
                        <i class="fa fa-list-alt"></i> Basic Components</a>
                      <ul id="c4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e4">
                        <li>
                          <a class="withripple" href="component-panels.html">
                            <i class="zmdi zmdi-view-agenda"></i> Panels</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-alerts.html">
                            <i class="zmdi zmdi-info"></i> Alerts &amp; Wells</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-badges.html">
                            <i class="zmdi zmdi-tag"></i> Badges &amp; Badges Pills</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-lists.html">
                            <i class="zmdi zmdi-view-list"></i> Lists</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-thumbnails.html">
                            <i class="zmdi zmdi-image-o"></i> Thumbnails</a>
                          </a>
                        </li>
                        <li>
                          <a class="withripple" href="component-carousels.html">
                            <i class="zmdi zmdi-view-carousel"></i> Carousels</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-modals.html">
                            <i class="zmdi zmdi-window-maximize"></i> Modals</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-tooltip.html">
                            <i class="zmdi zmdi-pin-help"></i> Tooltip &amp; Popover</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-progress-bars.html">
                            <i class="zmdi zmdi-view-headline"></i> Progress Bars</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-pagination.html">
                            <i class="zmdi zmdi-n-2-square"></i> Pagination</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-dropdowns.html">
                            <i class="fa fa-info"></i> Dropdowns</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e5">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c5" aria-expanded="true" aria-controls="c5" class="collapsed withripple">
                        <i class="zmdi zmdi-folder-star-alt"></i> Extra Components</a>
                      <ul id="c5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e5">
                        <li>
                          <a class="withripple" href="component-cards.html">
                            <i class="zmdi zmdi-card-membership"></i> Cards</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-composite-cards.html">
                            <i class="zmdi zmdi-card-giftcard"></i> Composite Cards</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-counters.html">
                            <i class="zmdi zmdi-n-6-square"></i> Counters</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-audio-video.html">
                            <i class="zmdi zmdi-play-circle"></i> Audio &amp; Video</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-masonry.html">
                            <i class="zmdi zmdi-apps"></i> Masonry Layer</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-snackbar.html">
                            <i class="zmdi zmdi-notifications-active"></i> SnackBar</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-lightbox.html">
                            <i class="zmdi zmdi-collection-image-o"></i> Lightbox</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e6">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c6" aria-expanded="true" aria-controls="c6" class="collapsed withripple">
                        <i class="zmdi zmdi-tab"></i> Collapses &amp; Tabs</a>
                      <ul id="c6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e6">
                        <li>
                          <a class="withripple" href="component-collapses.html">
                            <i class="zmdi zmdi-view-day"></i> Collapses</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-horizontal-tabs.html">
                            <i class="zmdi zmdi-tab"></i> Horitzontal Tabs</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-vertical-tabs.html">
                            <i class="zmdi zmdi-menu"></i> Vertical Tabs</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e7">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c7" aria-expanded="true" aria-controls="c7" class="collapsed withripple">
                        <i class="fa fa-area-chart"></i> Charts</a>
                      <ul id="c7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e7">
                        <li>
                          <a class="withripple" href="component-charts-circle.html">
                            <i class<i class="zmdi zmdi-chart-donut"></i> Circle Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-bar.html">
                            <i class="fa fa-bar-chart"></i> Bars Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-line.html">
                            <i class="fa fa-line-chart"></i> Line Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-more.html">
                            <i class="fa fa-pie-chart"></i> More Charts</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <!-- ms-collapse-nav -->
                </div>
              </div>
            </div>
            <!-- col-lg-3 -->
            <div class="col-lg-9 ms-paper-content-container">
              <div class="ms-paper-content">
                <h1>Material Design Iconic Font</h1>
                <p class="alert alert-light alert-info">
                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                  <i class="fa fa-flag"></i>All icons in Material Design Iconic Font available with Material Style Template! If you want more information about how to use them, you can visit
                  <a href="http://zavoloklom.github.io/material-design-iconic-font/index.html">official site</a>. </p>
                <section class="ms-component-section">
                  <section class="icon-set" id="new">
                    <h2 class="color-primary mt-4 mb-2">33 New Icons in 2.2</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="group" data-code="f3e9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-group zmdi-hc-fw"></i>
                          <span>group</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="rss" data-code="f3ea">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-rss zmdi-hc-fw"></i>
                          <span>rss</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shape" data-code="f3eb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shape zmdi-hc-fw"></i>
                          <span>shape</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="spinner" data-code="f3ec">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-spinner zmdi-hc-fw"></i>
                          <span>spinner</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="ungroup" data-code="f3ed">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-ungroup zmdi-hc-fw"></i>
                          <span>ungroup</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="500px" data-code="f3ee">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-500px zmdi-hc-fw"></i>
                          <span>500px</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="8tracks" data-code="f3ef">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-8tracks zmdi-hc-fw"></i>
                          <span>8tracks</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="amazon" data-code="f3f0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-amazon zmdi-hc-fw"></i>
                          <span>amazon</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="blogger" data-code="f3f1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-blogger zmdi-hc-fw"></i>
                          <span>blogger</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="delicious" data-code="f3f2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-delicious zmdi-hc-fw"></i>
                          <span>delicious</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="disqus" data-code="f3f3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-disqus zmdi-hc-fw"></i>
                          <span>disqus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flattr" data-code="f3f4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flattr zmdi-hc-fw"></i>
                          <span>flattr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flickr" data-code="f3f5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flickr zmdi-hc-fw"></i>
                          <span>flickr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="github-alt" data-code="f3f6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-github-alt zmdi-hc-fw"></i>
                          <span>github-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-old" data-code="f3f7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-old zmdi-hc-fw"></i>
                          <span>google-old</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="linkedin" data-code="f3f8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-linkedin zmdi-hc-fw"></i>
                          <span>linkedin</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="odnoklassniki" data-code="f3f9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-odnoklassniki zmdi-hc-fw"></i>
                          <span>odnoklassniki</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="outlook" data-code="f3fa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-outlook zmdi-hc-fw"></i>
                          <span>outlook</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="paypal-alt" data-code="f3fb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-paypal-alt zmdi-hc-fw"></i>
                          <span>paypal-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pinterest" data-code="f3fc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pinterest zmdi-hc-fw"></i>
                          <span>pinterest</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="playstation" data-code="f3fd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-playstation zmdi-hc-fw"></i>
                          <span>playstation</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="reddit" data-code="f3fe">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-reddit zmdi-hc-fw"></i>
                          <span>reddit</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="skype" data-code="f3ff">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-skype zmdi-hc-fw"></i>
                          <span>skype</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="slideshare" data-code="f400">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-slideshare zmdi-hc-fw"></i>
                          <span>slideshare</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="soundcloud" data-code="f401">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-soundcloud zmdi-hc-fw"></i>
                          <span>soundcloud</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tumblr" data-code="f402">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tumblr zmdi-hc-fw"></i>
                          <span>tumblr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="twitch" data-code="f403">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-twitch zmdi-hc-fw"></i>
                          <span>twitch</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="vimeo" data-code="f404">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-vimeo zmdi-hc-fw"></i>
                          <span>vimeo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="whatsapp" data-code="f405">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-whatsapp zmdi-hc-fw"></i>
                          <span>whatsapp</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="xbox" data-code="f406">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-xbox zmdi-hc-fw"></i>
                          <span>xbox</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="yahoo" data-code="f407">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-yahoo zmdi-hc-fw"></i>
                          <span>yahoo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="youtube-play" data-code="f408">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-youtube-play zmdi-hc-fw"></i>
                          <span>youtube-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="youtube" data-code="f409">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-youtube zmdi-hc-fw"></i>
                          <span>youtube</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="application">
                    <h2 class="color-primary mt-4 mb-2">Web Application</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="3d-rotation" data-code="f101">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-3d-rotation zmdi-hc-fw"></i>
                          <span>3d-rotation</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airplane-off" data-code="f102">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airplane-off zmdi-hc-fw"></i>
                          <span>airplane-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airplane" data-code="f103">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airplane zmdi-hc-fw"></i>
                          <span>airplane</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="album" data-code="f104">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-album zmdi-hc-fw"></i>
                          <span>album</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="archive" data-code="f105">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-archive zmdi-hc-fw"></i>
                          <span>archive</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment-account" data-code="f106">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment-account zmdi-hc-fw"></i>
                          <span>assignment-account</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment-alert" data-code="f107">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment-alert zmdi-hc-fw"></i>
                          <span>assignment-alert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment-check" data-code="f108">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment-check zmdi-hc-fw"></i>
                          <span>assignment-check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment-o" data-code="f109">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment-o zmdi-hc-fw"></i>
                          <span>assignment-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment-return" data-code="f10a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment-return zmdi-hc-fw"></i>
                          <span>assignment-return</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment-returned" data-code="f10b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment-returned zmdi-hc-fw"></i>
                          <span>assignment-returned</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="assignment" data-code="f10c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-assignment zmdi-hc-fw"></i>
                          <span>assignment</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="attachment-alt" data-code="f10d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-attachment-alt zmdi-hc-fw"></i>
                          <span>attachment-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="attachment" data-code="f10e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-attachment zmdi-hc-fw"></i>
                          <span>attachment</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="audio" data-code="f10f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-audio zmdi-hc-fw"></i>
                          <span>audio</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="badge-check" data-code="f110">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-badge-check zmdi-hc-fw"></i>
                          <span>badge-check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="balance-wallet" data-code="f111">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-balance-wallet zmdi-hc-fw"></i>
                          <span>balance-wallet</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="balance" data-code="f112">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-balance zmdi-hc-fw"></i>
                          <span>balance</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="battery-alert" data-code="f113">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-battery-alert zmdi-hc-fw"></i>
                          <span>battery-alert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="battery-flash" data-code="f114">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-battery-flash zmdi-hc-fw"></i>
                          <span>battery-flash</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="battery-unknown" data-code="f115">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-battery-unknown zmdi-hc-fw"></i>
                          <span>battery-unknown</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="battery" data-code="f116">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-battery zmdi-hc-fw"></i>
                          <span>battery</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bike" data-code="f117">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bike zmdi-hc-fw"></i>
                          <span>bike</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="block-alt" data-code="f118">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-block-alt zmdi-hc-fw"></i>
                          <span>block-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="block" data-code="f119">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-block zmdi-hc-fw"></i>
                          <span>block</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="boat" data-code="f11a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-boat zmdi-hc-fw"></i>
                          <span>boat</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="book-image" data-code="f11b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-book-image zmdi-hc-fw"></i>
                          <span>book-image</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="book" data-code="f11c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-book zmdi-hc-fw"></i>
                          <span>book</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bookmark-outline" data-code="f11d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bookmark-outline zmdi-hc-fw"></i>
                          <span>bookmark-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bookmark" data-code="f11e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bookmark zmdi-hc-fw"></i>
                          <span>bookmark</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brush" data-code="f11f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brush zmdi-hc-fw"></i>
                          <span>brush</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bug" data-code="f120">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bug zmdi-hc-fw"></i>
                          <span>bug</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bus" data-code="f121">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bus zmdi-hc-fw"></i>
                          <span>bus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cake" data-code="f122">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cake zmdi-hc-fw"></i>
                          <span>cake</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="car-taxi" data-code="f123">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-car-taxi zmdi-hc-fw"></i>
                          <span>car-taxi</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="car-wash" data-code="f124">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-car-wash zmdi-hc-fw"></i>
                          <span>car-wash</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="car" data-code="f125">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-car zmdi-hc-fw"></i>
                          <span>car</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-giftcard" data-code="f126">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-giftcard zmdi-hc-fw"></i>
                          <span>card-giftcard</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-membership" data-code="f127">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-membership zmdi-hc-fw"></i>
                          <span>card-membership</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-travel" data-code="f128">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-travel zmdi-hc-fw"></i>
                          <span>card-travel</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card" data-code="f129">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card zmdi-hc-fw"></i>
                          <span>card</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="case-check" data-code="f12a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-case-check zmdi-hc-fw"></i>
                          <span>case-check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="case-download" data-code="f12b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-case-download zmdi-hc-fw"></i>
                          <span>case-download</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="case-play" data-code="f12c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-case-play zmdi-hc-fw"></i>
                          <span>case-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="case" data-code="f12d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-case zmdi-hc-fw"></i>
                          <span>case</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cast-connected" data-code="f12e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cast-connected zmdi-hc-fw"></i>
                          <span>cast-connected</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cast" data-code="f12f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cast zmdi-hc-fw"></i>
                          <span>cast</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="chart-donut" data-code="f130">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-chart-donut zmdi-hc-fw"></i>
                          <span>chart-donut</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="chart" data-code="f131">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-chart zmdi-hc-fw"></i>
                          <span>chart</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="city-alt" data-code="f132">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-city-alt zmdi-hc-fw"></i>
                          <span>city-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="city" data-code="f133">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-city zmdi-hc-fw"></i>
                          <span>city</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="close-circle-o" data-code="f134">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-close-circle-o zmdi-hc-fw"></i>
                          <span>close-circle-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="close-circle" data-code="f135">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-close-circle zmdi-hc-fw"></i>
                          <span>close-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="close" data-code="f136">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-close zmdi-hc-fw"></i>
                          <span>close</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cocktail" data-code="f137">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cocktail zmdi-hc-fw"></i>
                          <span>cocktail</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="code-setting" data-code="f138">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-code-setting zmdi-hc-fw"></i>
                          <span>code-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="code-smartphone" data-code="f139">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-code-smartphone zmdi-hc-fw"></i>
                          <span>code-smartphone</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="code" data-code="f13a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-code zmdi-hc-fw"></i>
                          <span>code</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="coffee" data-code="f13b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-coffee zmdi-hc-fw"></i>
                          <span>coffee</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-bookmark" data-code="f13c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-bookmark zmdi-hc-fw"></i>
                          <span>collection-bookmark</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-case-play" data-code="f13d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-case-play zmdi-hc-fw"></i>
                          <span>collection-case-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-folder-image" data-code="f13e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-folder-image zmdi-hc-fw"></i>
                          <span>collection-folder-image</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-image-o" data-code="f13f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-image-o zmdi-hc-fw"></i>
                          <span>collection-image-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-image" data-code="f140">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-image zmdi-hc-fw"></i>
                          <span>collection-image</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-1" data-code="f141">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-1 zmdi-hc-fw"></i>
                          <span>collection-item-1</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-2" data-code="f142">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-2 zmdi-hc-fw"></i>
                          <span>collection-item-2</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-3" data-code="f143">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-3 zmdi-hc-fw"></i>
                          <span>collection-item-3</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-4" data-code="f144">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-4 zmdi-hc-fw"></i>
                          <span>collection-item-4</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-5" data-code="f145">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-5 zmdi-hc-fw"></i>
                          <span>collection-item-5</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-6" data-code="f146">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-6 zmdi-hc-fw"></i>
                          <span>collection-item-6</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-7" data-code="f147">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-7 zmdi-hc-fw"></i>
                          <span>collection-item-7</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-8" data-code="f148">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-8 zmdi-hc-fw"></i>
                          <span>collection-item-8</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-9-plus" data-code="f149">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-9-plus zmdi-hc-fw"></i>
                          <span>collection-item-9-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item-9" data-code="f14a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item-9 zmdi-hc-fw"></i>
                          <span>collection-item-9</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-item" data-code="f14b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-item zmdi-hc-fw"></i>
                          <span>collection-item</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-music" data-code="f14c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-music zmdi-hc-fw"></i>
                          <span>collection-music</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-pdf" data-code="f14d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-pdf zmdi-hc-fw"></i>
                          <span>collection-pdf</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-plus" data-code="f14e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-plus zmdi-hc-fw"></i>
                          <span>collection-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-speaker" data-code="f14f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-speaker zmdi-hc-fw"></i>
                          <span>collection-speaker</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-text" data-code="f150">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-text zmdi-hc-fw"></i>
                          <span>collection-text</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="collection-video" data-code="f151">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-collection-video zmdi-hc-fw"></i>
                          <span>collection-video</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="compass" data-code="f152">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-compass zmdi-hc-fw"></i>
                          <span>compass</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cutlery" data-code="f153">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cutlery zmdi-hc-fw"></i>
                          <span>cutlery</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="delete" data-code="f154">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-delete zmdi-hc-fw"></i>
                          <span>delete</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dialpad" data-code="f155">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dialpad zmdi-hc-fw"></i>
                          <span>dialpad</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dns" data-code="f156">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dns zmdi-hc-fw"></i>
                          <span>dns</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="drink" data-code="f157">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-drink zmdi-hc-fw"></i>
                          <span>drink</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="edit" data-code="f158">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-edit zmdi-hc-fw"></i>
                          <span>edit</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="email-open" data-code="f159">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-email-open zmdi-hc-fw"></i>
                          <span>email-open</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="email" data-code="f15a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-email zmdi-hc-fw"></i>
                          <span>email</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="eye-off" data-code="f15b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-eye-off zmdi-hc-fw"></i>
                          <span>eye-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="eye" data-code="f15c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-eye zmdi-hc-fw"></i>
                          <span>eye</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="eyedropper" data-code="f15d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-eyedropper zmdi-hc-fw"></i>
                          <span>eyedropper</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="favorite-outline" data-code="f15e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-favorite-outline zmdi-hc-fw"></i>
                          <span>favorite-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="favorite" data-code="f15f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-favorite zmdi-hc-fw"></i>
                          <span>favorite</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="filter-list" data-code="f160">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-filter-list zmdi-hc-fw"></i>
                          <span>filter-list</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="fire" data-code="f161">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-fire zmdi-hc-fw"></i>
                          <span>fire</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flag" data-code="f162">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flag zmdi-hc-fw"></i>
                          <span>flag</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flare" data-code="f163">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flare zmdi-hc-fw"></i>
                          <span>flare</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flash-auto" data-code="f164">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flash-auto zmdi-hc-fw"></i>
                          <span>flash-auto</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flash-off" data-code="f165">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flash-off zmdi-hc-fw"></i>
                          <span>flash-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flash" data-code="f166">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flash zmdi-hc-fw"></i>
                          <span>flash</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flip" data-code="f167">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flip zmdi-hc-fw"></i>
                          <span>flip</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flower-alt" data-code="f168">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flower-alt zmdi-hc-fw"></i>
                          <span>flower-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flower" data-code="f169">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flower zmdi-hc-fw"></i>
                          <span>flower</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="font" data-code="f16a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-font zmdi-hc-fw"></i>
                          <span>font</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="fullscreen-alt" data-code="f16b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-fullscreen-alt zmdi-hc-fw"></i>
                          <span>fullscreen-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="fullscreen-exit" data-code="f16c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-fullscreen-exit zmdi-hc-fw"></i>
                          <span>fullscreen-exit</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="fullscreen" data-code="f16d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-fullscreen zmdi-hc-fw"></i>
                          <span>fullscreen</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="functions" data-code="f16e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-functions zmdi-hc-fw"></i>
                          <span>functions</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gas-station" data-code="f16f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gas-station zmdi-hc-fw"></i>
                          <span>gas-station</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gesture" data-code="f170">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gesture zmdi-hc-fw"></i>
                          <span>gesture</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="globe-alt" data-code="f171">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-globe-alt zmdi-hc-fw"></i>
                          <span>globe-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="globe-lock" data-code="f172">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-globe-lock zmdi-hc-fw"></i>
                          <span>globe-lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="globe" data-code="f173">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-globe zmdi-hc-fw"></i>
                          <span>globe</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="graduation-cap" data-code="f174">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-graduation-cap zmdi-hc-fw"></i>
                          <span>graduation-cap</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="group" data-code="f3e9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-group zmdi-hc-fw"></i>
                          <span>group</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="home" data-code="f175">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-home zmdi-hc-fw"></i>
                          <span>home</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hospital-alt" data-code="f176">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hospital-alt zmdi-hc-fw"></i>
                          <span>hospital-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hospital" data-code="f177">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hospital zmdi-hc-fw"></i>
                          <span>hospital</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hotel" data-code="f178">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hotel zmdi-hc-fw"></i>
                          <span>hotel</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hourglass-alt" data-code="f179">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hourglass-alt zmdi-hc-fw"></i>
                          <span>hourglass-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hourglass-outline" data-code="f17a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hourglass-outline zmdi-hc-fw"></i>
                          <span>hourglass-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hourglass" data-code="f17b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hourglass zmdi-hc-fw"></i>
                          <span>hourglass</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="http" data-code="f17c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-http zmdi-hc-fw"></i>
                          <span>http</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="image-alt" data-code="f17d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-image-alt zmdi-hc-fw"></i>
                          <span>image-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="image-o" data-code="f17e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-image-o zmdi-hc-fw"></i>
                          <span>image-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="image" data-code="f17f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-image zmdi-hc-fw"></i>
                          <span>image</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="inbox" data-code="f180">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-inbox zmdi-hc-fw"></i>
                          <span>inbox</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="invert-colors-off" data-code="f181">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-invert-colors-off zmdi-hc-fw"></i>
                          <span>invert-colors-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="invert-colors" data-code="f182">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-invert-colors zmdi-hc-fw"></i>
                          <span>invert-colors</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="key" data-code="f183">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-key zmdi-hc-fw"></i>
                          <span>key</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="label-alt-outline" data-code="f184">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-label-alt-outline zmdi-hc-fw"></i>
                          <span>label-alt-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="label-alt" data-code="f185">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-label-alt zmdi-hc-fw"></i>
                          <span>label-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="label-heart" data-code="f186">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-label-heart zmdi-hc-fw"></i>
                          <span>label-heart</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="label" data-code="f187">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-label zmdi-hc-fw"></i>
                          <span>label</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="labels" data-code="f188">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-labels zmdi-hc-fw"></i>
                          <span>labels</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="lamp" data-code="f189">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-lamp zmdi-hc-fw"></i>
                          <span>lamp</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="landscape" data-code="f18a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-landscape zmdi-hc-fw"></i>
                          <span>landscape</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="layers-off" data-code="f18b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-layers-off zmdi-hc-fw"></i>
                          <span>layers-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="layers" data-code="f18c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-layers zmdi-hc-fw"></i>
                          <span>layers</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="library" data-code="f18d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-library zmdi-hc-fw"></i>
                          <span>library</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="link" data-code="f18e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-link zmdi-hc-fw"></i>
                          <span>link</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="lock-open" data-code="f18f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-lock-open zmdi-hc-fw"></i>
                          <span>lock-open</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="lock-outline" data-code="f190">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-lock-outline zmdi-hc-fw"></i>
                          <span>lock-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="lock" data-code="f191">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-lock zmdi-hc-fw"></i>
                          <span>lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mail-reply-all" data-code="f192">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mail-reply-all zmdi-hc-fw"></i>
                          <span>mail-reply-all</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mail-reply" data-code="f193">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mail-reply zmdi-hc-fw"></i>
                          <span>mail-reply</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mail-send" data-code="f194">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mail-send zmdi-hc-fw"></i>
                          <span>mail-send</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mall" data-code="f195">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mall zmdi-hc-fw"></i>
                          <span>mall</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="map" data-code="f196">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-map zmdi-hc-fw"></i>
                          <span>map</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="menu" data-code="f197">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-menu zmdi-hc-fw"></i>
                          <span>menu</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="money-box" data-code="f198">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-money-box zmdi-hc-fw"></i>
                          <span>money-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="money-off" data-code="f199">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-money-off zmdi-hc-fw"></i>
                          <span>money-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="money" data-code="f19a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-money zmdi-hc-fw"></i>
                          <span>money</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="more-vert" data-code="f19b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-more-vert zmdi-hc-fw"></i>
                          <span>more-vert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="more" data-code="f19c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-more zmdi-hc-fw"></i>
                          <span>more</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="movie-alt" data-code="f19d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-movie-alt zmdi-hc-fw"></i>
                          <span>movie-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="movie" data-code="f19e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-movie zmdi-hc-fw"></i>
                          <span>movie</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="nature-people" data-code="f19f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-nature-people zmdi-hc-fw"></i>
                          <span>nature-people</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="nature" data-code="f1a0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-nature zmdi-hc-fw"></i>
                          <span>nature</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="navigation" data-code="f1a1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-navigation zmdi-hc-fw"></i>
                          <span>navigation</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="open-in-browser" data-code="f1a2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-open-in-browser zmdi-hc-fw"></i>
                          <span>open-in-browser</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="open-in-new" data-code="f1a3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-open-in-new zmdi-hc-fw"></i>
                          <span>open-in-new</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="palette" data-code="f1a4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-palette zmdi-hc-fw"></i>
                          <span>palette</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="parking" data-code="f1a5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-parking zmdi-hc-fw"></i>
                          <span>parking</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-account" data-code="f1a6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-account zmdi-hc-fw"></i>
                          <span>pin-account</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-assistant" data-code="f1a7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-assistant zmdi-hc-fw"></i>
                          <span>pin-assistant</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-drop" data-code="f1a8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-drop zmdi-hc-fw"></i>
                          <span>pin-drop</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-help" data-code="f1a9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-help zmdi-hc-fw"></i>
                          <span>pin-help</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-off" data-code="f1aa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-off zmdi-hc-fw"></i>
                          <span>pin-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin" data-code="f1ab">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin zmdi-hc-fw"></i>
                          <span>pin</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pizza" data-code="f1ac">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pizza zmdi-hc-fw"></i>
                          <span>pizza</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plaster" data-code="f1ad">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plaster zmdi-hc-fw"></i>
                          <span>plaster</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="power-setting" data-code="f1ae">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-power-setting zmdi-hc-fw"></i>
                          <span>power-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="power" data-code="f1af">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-power zmdi-hc-fw"></i>
                          <span>power</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="print" data-code="f1b0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-print zmdi-hc-fw"></i>
                          <span>print</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="puzzle-piece" data-code="f1b1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-puzzle-piece zmdi-hc-fw"></i>
                          <span>puzzle-piece</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="quote" data-code="f1b2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-quote zmdi-hc-fw"></i>
                          <span>quote</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="railway" data-code="f1b3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-railway zmdi-hc-fw"></i>
                          <span>railway</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="receipt" data-code="f1b4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-receipt zmdi-hc-fw"></i>
                          <span>receipt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="refresh-alt" data-code="f1b5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-refresh-alt zmdi-hc-fw"></i>
                          <span>refresh-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="refresh-sync-alert" data-code="f1b6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-refresh-sync-alert zmdi-hc-fw"></i>
                          <span>refresh-sync-alert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="refresh-sync-off" data-code="f1b7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-refresh-sync-off zmdi-hc-fw"></i>
                          <span>refresh-sync-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="refresh-sync" data-code="f1b8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-refresh-sync zmdi-hc-fw"></i>
                          <span>refresh-sync</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="refresh" data-code="f1b9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-refresh zmdi-hc-fw"></i>
                          <span>refresh</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="roller" data-code="f1ba">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-roller zmdi-hc-fw"></i>
                          <span>roller</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="ruler" data-code="f1bb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-ruler zmdi-hc-fw"></i>
                          <span>ruler</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="scissors" data-code="f1bc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-scissors zmdi-hc-fw"></i>
                          <span>scissors</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="screen-rotation-lock" data-code="f1bd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-screen-rotation-lock zmdi-hc-fw"></i>
                          <span>screen-rotation-lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="screen-rotation" data-code="f1be">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-screen-rotation zmdi-hc-fw"></i>
                          <span>screen-rotation</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="search-for" data-code="f1bf">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-search-for zmdi-hc-fw"></i>
                          <span>search-for</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="search-in-file" data-code="f1c0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-search-in-file zmdi-hc-fw"></i>
                          <span>search-in-file</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="search-in-page" data-code="f1c1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-search-in-page zmdi-hc-fw"></i>
                          <span>search-in-page</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="search-replace" data-code="f1c2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-search-replace zmdi-hc-fw"></i>
                          <span>search-replace</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="search" data-code="f1c3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-search zmdi-hc-fw"></i>
                          <span>search</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="seat" data-code="f1c4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-seat zmdi-hc-fw"></i>
                          <span>seat</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="settings-square" data-code="f1c5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-settings-square zmdi-hc-fw"></i>
                          <span>settings-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="settings" data-code="f1c6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-settings zmdi-hc-fw"></i>
                          <span>settings</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shape" data-code="f3eb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shape zmdi-hc-fw"></i>
                          <span>shape</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shield-check" data-code="f1c7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shield-check zmdi-hc-fw"></i>
                          <span>shield-check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shield-security" data-code="f1c8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shield-security zmdi-hc-fw"></i>
                          <span>shield-security</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shopping-basket" data-code="f1c9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shopping-basket zmdi-hc-fw"></i>
                          <span>shopping-basket</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shopping-cart-plus" data-code="f1ca">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i>
                          <span>shopping-cart-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shopping-cart" data-code="f1cb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shopping-cart zmdi-hc-fw"></i>
                          <span>shopping-cart</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sign-in" data-code="f1cc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sign-in zmdi-hc-fw"></i>
                          <span>sign-in</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sort-amount-asc" data-code="f1cd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sort-amount-asc zmdi-hc-fw"></i>
                          <span>sort-amount-asc</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sort-amount-desc" data-code="f1ce">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sort-amount-desc zmdi-hc-fw"></i>
                          <span>sort-amount-desc</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sort-asc" data-code="f1cf">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sort-asc zmdi-hc-fw"></i>
                          <span>sort-asc</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sort-desc" data-code="f1d0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sort-desc zmdi-hc-fw"></i>
                          <span>sort-desc</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="spellcheck" data-code="f1d1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-spellcheck zmdi-hc-fw"></i>
                          <span>spellcheck</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="spinner" data-code="f3ec">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-spinner zmdi-hc-fw"></i>
                          <span>spinner</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="storage" data-code="f1d2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-storage zmdi-hc-fw"></i>
                          <span>storage</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="store-24" data-code="f1d3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-store-24 zmdi-hc-fw"></i>
                          <span>store-24</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="store" data-code="f1d4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-store zmdi-hc-fw"></i>
                          <span>store</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="subway" data-code="f1d5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-subway zmdi-hc-fw"></i>
                          <span>subway</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sun" data-code="f1d6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sun zmdi-hc-fw"></i>
                          <span>sun</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tab-unselected" data-code="f1d7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tab-unselected zmdi-hc-fw"></i>
                          <span>tab-unselected</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tab" data-code="f1d8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tab zmdi-hc-fw"></i>
                          <span>tab</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tag-close" data-code="f1d9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tag-close zmdi-hc-fw"></i>
                          <span>tag-close</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tag-more" data-code="f1da">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tag-more zmdi-hc-fw"></i>
                          <span>tag-more</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tag" data-code="f1db">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tag zmdi-hc-fw"></i>
                          <span>tag</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="thumb-down" data-code="f1dc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-thumb-down zmdi-hc-fw"></i>
                          <span>thumb-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="thumb-up-down" data-code="f1dd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-thumb-up-down zmdi-hc-fw"></i>
                          <span>thumb-up-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="thumb-up" data-code="f1de">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-thumb-up zmdi-hc-fw"></i>
                          <span>thumb-up</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="ticket-star" data-code="f1df">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-ticket-star zmdi-hc-fw"></i>
                          <span>ticket-star</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="toll" data-code="f1e0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-toll zmdi-hc-fw"></i>
                          <span>toll</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="toys" data-code="f1e1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-toys zmdi-hc-fw"></i>
                          <span>toys</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="traffic" data-code="f1e2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-traffic zmdi-hc-fw"></i>
                          <span>traffic</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="translate" data-code="f1e3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-translate zmdi-hc-fw"></i>
                          <span>translate</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="triangle-down" data-code="f1e4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-triangle-down zmdi-hc-fw"></i>
                          <span>triangle-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="triangle-up" data-code="f1e5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-triangle-up zmdi-hc-fw"></i>
                          <span>triangle-up</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="truck" data-code="f1e6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-truck zmdi-hc-fw"></i>
                          <span>truck</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="turning-sign" data-code="f1e7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-turning-sign zmdi-hc-fw"></i>
                          <span>turning-sign</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="ungroup" data-code="f3ed">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-ungroup zmdi-hc-fw"></i>
                          <span>ungroup</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wallpaper" data-code="f1e8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wallpaper zmdi-hc-fw"></i>
                          <span>wallpaper</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="washing-machine" data-code="f1e9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-washing-machine zmdi-hc-fw"></i>
                          <span>washing-machine</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="window-maximize" data-code="f1ea">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-window-maximize zmdi-hc-fw"></i>
                          <span>window-maximize</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="window-minimize" data-code="f1eb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-window-minimize zmdi-hc-fw"></i>
                          <span>window-minimize</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="window-restore" data-code="f1ec">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-window-restore zmdi-hc-fw"></i>
                          <span>window-restore</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wrench" data-code="f1ed">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wrench zmdi-hc-fw"></i>
                          <span>wrench</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="zoom-in" data-code="f1ee">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-zoom-in zmdi-hc-fw"></i>
                          <span>zoom-in</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="zoom-out" data-code="f1ef">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-zoom-out zmdi-hc-fw"></i>
                          <span>zoom-out</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="alert">
                    <h2 class="color-primary mt-4 mb-2">Notifications</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="alert-circle-o" data-code="f1f0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alert-circle-o zmdi-hc-fw"></i>
                          <span>alert-circle-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alert-circle" data-code="f1f1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alert-circle zmdi-hc-fw"></i>
                          <span>alert-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alert-octagon" data-code="f1f2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alert-octagon zmdi-hc-fw"></i>
                          <span>alert-octagon</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alert-polygon" data-code="f1f3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alert-polygon zmdi-hc-fw"></i>
                          <span>alert-polygon</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alert-triangle" data-code="f1f4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alert-triangle zmdi-hc-fw"></i>
                          <span>alert-triangle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="help-outline" data-code="f1f5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-help-outline zmdi-hc-fw"></i>
                          <span>help-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="help" data-code="f1f6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-help zmdi-hc-fw"></i>
                          <span>help</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="info-outline" data-code="f1f7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-info-outline zmdi-hc-fw"></i>
                          <span>info-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="info" data-code="f1f8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-info zmdi-hc-fw"></i>
                          <span>info</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="notifications-active" data-code="f1f9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-notifications-active zmdi-hc-fw"></i>
                          <span>notifications-active</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="notifications-add" data-code="f1fa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-notifications-add zmdi-hc-fw"></i>
                          <span>notifications-add</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="notifications-none" data-code="f1fb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-notifications-none zmdi-hc-fw"></i>
                          <span>notifications-none</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="notifications-off" data-code="f1fc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-notifications-off zmdi-hc-fw"></i>
                          <span>notifications-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="notifications-paused" data-code="f1fd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-notifications-paused zmdi-hc-fw"></i>
                          <span>notifications-paused</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="notifications" data-code="f1fe">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-notifications zmdi-hc-fw"></i>
                          <span>notifications</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="person">
                    <h2 class="color-primary mt-4 mb-2">Person</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-add" data-code="f1ff">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-add zmdi-hc-fw"></i>
                          <span>account-add</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-box-mail" data-code="f200">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-box-mail zmdi-hc-fw"></i>
                          <span>account-box-mail</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-box-o" data-code="f201">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-box-o zmdi-hc-fw"></i>
                          <span>account-box-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-box-phone" data-code="f202">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-box-phone zmdi-hc-fw"></i>
                          <span>account-box-phone</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-box" data-code="f203">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-box zmdi-hc-fw"></i>
                          <span>account-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-calendar" data-code="f204">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-calendar zmdi-hc-fw"></i>
                          <span>account-calendar</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-circle" data-code="f205">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-circle zmdi-hc-fw"></i>
                          <span>account-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account-o" data-code="f206">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account-o zmdi-hc-fw"></i>
                          <span>account-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="account" data-code="f207">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-account zmdi-hc-fw"></i>
                          <span>account</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="accounts-add" data-code="f208">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-accounts-add zmdi-hc-fw"></i>
                          <span>accounts-add</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="accounts-alt" data-code="f209">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-accounts-alt zmdi-hc-fw"></i>
                          <span>accounts-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="accounts-list-alt" data-code="f20a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-accounts-list-alt zmdi-hc-fw"></i>
                          <span>accounts-list-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="accounts-list" data-code="f20b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-accounts-list zmdi-hc-fw"></i>
                          <span>accounts-list</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="accounts-outline" data-code="f20c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-accounts-outline zmdi-hc-fw"></i>
                          <span>accounts-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="accounts" data-code="f20d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-accounts zmdi-hc-fw"></i>
                          <span>accounts</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="face" data-code="f20e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-face zmdi-hc-fw"></i>
                          <span>face</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="female" data-code="f20f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-female zmdi-hc-fw"></i>
                          <span>female</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="male-alt" data-code="f210">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-male-alt zmdi-hc-fw"></i>
                          <span>male-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="male-female" data-code="f211">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-male-female zmdi-hc-fw"></i>
                          <span>male-female</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="male" data-code="f212">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-male zmdi-hc-fw"></i>
                          <span>male</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mood-bad" data-code="f213">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mood-bad zmdi-hc-fw"></i>
                          <span>mood-bad</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mood" data-code="f214">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mood zmdi-hc-fw"></i>
                          <span>mood</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="run" data-code="f215">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-run zmdi-hc-fw"></i>
                          <span>run</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="walk" data-code="f216">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-walk zmdi-hc-fw"></i>
                          <span>walk</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="file">
                    <h2 class="color-primary mt-4 mb-2">File</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-box" data-code="f217">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-box zmdi-hc-fw"></i>
                          <span>cloud-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-circle" data-code="f218">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-circle zmdi-hc-fw"></i>
                          <span>cloud-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-done" data-code="f219">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-done zmdi-hc-fw"></i>
                          <span>cloud-done</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-download" data-code="f21a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-download zmdi-hc-fw"></i>
                          <span>cloud-download</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-off" data-code="f21b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-off zmdi-hc-fw"></i>
                          <span>cloud-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-outline-alt" data-code="f21c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-outline-alt zmdi-hc-fw"></i>
                          <span>cloud-outline-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-outline" data-code="f21d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-outline zmdi-hc-fw"></i>
                          <span>cloud-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud-upload" data-code="f21e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud-upload zmdi-hc-fw"></i>
                          <span>cloud-upload</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cloud" data-code="f21f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-cloud zmdi-hc-fw"></i>
                          <span>cloud</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="download" data-code="f220">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-download zmdi-hc-fw"></i>
                          <span>download</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="file-plus" data-code="f221">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-file-plus zmdi-hc-fw"></i>
                          <span>file-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="file-text" data-code="f222">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-file-text zmdi-hc-fw"></i>
                          <span>file-text</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="file" data-code="f223">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-file zmdi-hc-fw"></i>
                          <span>file</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="folder-outline" data-code="f224">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-folder-outline zmdi-hc-fw"></i>
                          <span>folder-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="folder-person" data-code="f225">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-folder-person zmdi-hc-fw"></i>
                          <span>folder-person</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="folder-star-alt" data-code="f226">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-folder-star-alt zmdi-hc-fw"></i>
                          <span>folder-star-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="folder-star" data-code="f227">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-folder-star zmdi-hc-fw"></i>
                          <span>folder-star</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="folder" data-code="f228">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-folder zmdi-hc-fw"></i>
                          <span>folder</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gif" data-code="f229">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gif zmdi-hc-fw"></i>
                          <span>gif</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="upload" data-code="f22a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-upload zmdi-hc-fw"></i>
                          <span>upload</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="editor">
                    <h2 class="color-primary mt-4 mb-2">Editor</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-all" data-code="f22b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-all zmdi-hc-fw"></i>
                          <span>border-all</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-bottom" data-code="f22c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-bottom zmdi-hc-fw"></i>
                          <span>border-bottom</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-clear" data-code="f22d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-clear zmdi-hc-fw"></i>
                          <span>border-clear</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-color" data-code="f22e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-color zmdi-hc-fw"></i>
                          <span>border-color</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-horizontal" data-code="f22f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-horizontal zmdi-hc-fw"></i>
                          <span>border-horizontal</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-inner" data-code="f230">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-inner zmdi-hc-fw"></i>
                          <span>border-inner</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-left" data-code="f231">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-left zmdi-hc-fw"></i>
                          <span>border-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-outer" data-code="f232">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-outer zmdi-hc-fw"></i>
                          <span>border-outer</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-right" data-code="f233">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-right zmdi-hc-fw"></i>
                          <span>border-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-style" data-code="f234">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-style zmdi-hc-fw"></i>
                          <span>border-style</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-top" data-code="f235">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-top zmdi-hc-fw"></i>
                          <span>border-top</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="border-vertical" data-code="f236">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-border-vertical zmdi-hc-fw"></i>
                          <span>border-vertical</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="copy" data-code="f237">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-copy zmdi-hc-fw"></i>
                          <span>copy</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop" data-code="f238">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop zmdi-hc-fw"></i>
                          <span>crop</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-align-center" data-code="f239">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-align-center zmdi-hc-fw"></i>
                          <span>format-align-center</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-align-justify" data-code="f23a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-align-justify zmdi-hc-fw"></i>
                          <span>format-align-justify</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-align-left" data-code="f23b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-align-left zmdi-hc-fw"></i>
                          <span>format-align-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-align-right" data-code="f23c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-align-right zmdi-hc-fw"></i>
                          <span>format-align-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-bold" data-code="f23d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-bold zmdi-hc-fw"></i>
                          <span>format-bold</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-clear-all" data-code="f23e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-clear-all zmdi-hc-fw"></i>
                          <span>format-clear-all</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-clear" data-code="f23f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-clear zmdi-hc-fw"></i>
                          <span>format-clear</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-color-fill" data-code="f240">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-color-fill zmdi-hc-fw"></i>
                          <span>format-color-fill</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-color-reset" data-code="f241">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-color-reset zmdi-hc-fw"></i>
                          <span>format-color-reset</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-color-text" data-code="f242">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-color-text zmdi-hc-fw"></i>
                          <span>format-color-text</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-indent-decrease" data-code="f243">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-indent-decrease zmdi-hc-fw"></i>
                          <span>format-indent-decrease</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-indent-increase" data-code="f244">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-indent-increase zmdi-hc-fw"></i>
                          <span>format-indent-increase</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-italic" data-code="f245">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-italic zmdi-hc-fw"></i>
                          <span>format-italic</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-line-spacing" data-code="f246">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-line-spacing zmdi-hc-fw"></i>
                          <span>format-line-spacing</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-list-bulleted" data-code="f247">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-list-bulleted zmdi-hc-fw"></i>
                          <span>format-list-bulleted</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-list-numbered" data-code="f248">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-list-numbered zmdi-hc-fw"></i>
                          <span>format-list-numbered</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-ltr" data-code="f249">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-ltr zmdi-hc-fw"></i>
                          <span>format-ltr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-rtl" data-code="f24a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-rtl zmdi-hc-fw"></i>
                          <span>format-rtl</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-size" data-code="f24b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-size zmdi-hc-fw"></i>
                          <span>format-size</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-strikethrough-s" data-code="f24c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-strikethrough-s zmdi-hc-fw"></i>
                          <span>format-strikethrough-s</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-strikethrough" data-code="f24d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-strikethrough zmdi-hc-fw"></i>
                          <span>format-strikethrough</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-subject" data-code="f24e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-subject zmdi-hc-fw"></i>
                          <span>format-subject</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-underlined" data-code="f24f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-underlined zmdi-hc-fw"></i>
                          <span>format-underlined</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-valign-bottom" data-code="f250">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-valign-bottom zmdi-hc-fw"></i>
                          <span>format-valign-bottom</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-valign-center" data-code="f251">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-valign-center zmdi-hc-fw"></i>
                          <span>format-valign-center</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="format-valign-top" data-code="f252">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-format-valign-top zmdi-hc-fw"></i>
                          <span>format-valign-top</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="redo" data-code="f253">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-redo zmdi-hc-fw"></i>
                          <span>redo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="select-all" data-code="f254">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-select-all zmdi-hc-fw"></i>
                          <span>select-all</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="space-bar" data-code="f255">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-space-bar zmdi-hc-fw"></i>
                          <span>space-bar</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="text-format" data-code="f256">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-text-format zmdi-hc-fw"></i>
                          <span>text-format</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="transform" data-code="f257">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-transform zmdi-hc-fw"></i>
                          <span>transform</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="undo" data-code="f258">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-undo zmdi-hc-fw"></i>
                          <span>undo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wrap-text" data-code="f259">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wrap-text zmdi-hc-fw"></i>
                          <span>wrap-text</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="comment">
                    <h2 class="color-primary mt-4 mb-2">Comment</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-alert" data-code="f25a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-alert zmdi-hc-fw"></i>
                          <span>comment-alert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-alt-text" data-code="f25b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-alt-text zmdi-hc-fw"></i>
                          <span>comment-alt-text</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-alt" data-code="f25c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-alt zmdi-hc-fw"></i>
                          <span>comment-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-edit" data-code="f25d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-edit zmdi-hc-fw"></i>
                          <span>comment-edit</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-image" data-code="f25e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-image zmdi-hc-fw"></i>
                          <span>comment-image</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-list" data-code="f25f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-list zmdi-hc-fw"></i>
                          <span>comment-list</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-more" data-code="f260">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-more zmdi-hc-fw"></i>
                          <span>comment-more</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-outline" data-code="f261">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-outline zmdi-hc-fw"></i>
                          <span>comment-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-text-alt" data-code="f262">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-text-alt zmdi-hc-fw"></i>
                          <span>comment-text-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-text" data-code="f263">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-text zmdi-hc-fw"></i>
                          <span>comment-text</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment-video" data-code="f264">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment-video zmdi-hc-fw"></i>
                          <span>comment-video</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comment" data-code="f265">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comment zmdi-hc-fw"></i>
                          <span>comment</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="comments" data-code="f266">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-comments zmdi-hc-fw"></i>
                          <span>comments</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="form">
                    <h2 class="color-primary mt-4 mb-2">Form</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="check-all" data-code="f267">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-check-all zmdi-hc-fw"></i>
                          <span>check-all</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="check-circle-u" data-code="f268">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-check-circle-u zmdi-hc-fw"></i>
                          <span>check-circle-u</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="check-circle" data-code="f269">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-check-circle zmdi-hc-fw"></i>
                          <span>check-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="check-square" data-code="f26a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-check-square zmdi-hc-fw"></i>
                          <span>check-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="check" data-code="f26b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-check zmdi-hc-fw"></i>
                          <span>check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="circle-o" data-code="f26c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-circle-o zmdi-hc-fw"></i>
                          <span>circle-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="circle" data-code="f26d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-circle zmdi-hc-fw"></i>
                          <span>circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dot-circle-alt" data-code="f26e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dot-circle-alt zmdi-hc-fw"></i>
                          <span>dot-circle-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dot-circle" data-code="f26f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dot-circle zmdi-hc-fw"></i>
                          <span>dot-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="minus-circle-outline" data-code="f270">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-minus-circle-outline zmdi-hc-fw"></i>
                          <span>minus-circle-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="minus-circle" data-code="f271">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-minus-circle zmdi-hc-fw"></i>
                          <span>minus-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="minus-square" data-code="f272">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-minus-square zmdi-hc-fw"></i>
                          <span>minus-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="minus" data-code="f273">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-minus zmdi-hc-fw"></i>
                          <span>minus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus-circle-o-duplicate" data-code="f274">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus-circle-o-duplicate zmdi-hc-fw"></i>
                          <span>plus-circle-o-duplicate</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus-circle-o" data-code="f275">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus-circle-o zmdi-hc-fw"></i>
                          <span>plus-circle-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus-circle" data-code="f276">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus-circle zmdi-hc-fw"></i>
                          <span>plus-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus-square" data-code="f277">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus-square zmdi-hc-fw"></i>
                          <span>plus-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus" data-code="f278">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus zmdi-hc-fw"></i>
                          <span>plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="square-o" data-code="f279">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-square-o zmdi-hc-fw"></i>
                          <span>square-o</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="star-circle" data-code="f27a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-star-circle zmdi-hc-fw"></i>
                          <span>star-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="star-half" data-code="f27b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-star-half zmdi-hc-fw"></i>
                          <span>star-half</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="star-outline" data-code="f27c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-star-outline zmdi-hc-fw"></i>
                          <span>star-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="star" data-code="f27d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-star zmdi-hc-fw"></i>
                          <span>star</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="hardware">
                    <h2 class="color-primary mt-4 mb-2">Hardware</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="bluetooth-connected" data-code="f27e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bluetooth-connected zmdi-hc-fw"></i>
                          <span>bluetooth-connected</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bluetooth-off" data-code="f27f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bluetooth-off zmdi-hc-fw"></i>
                          <span>bluetooth-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bluetooth-search" data-code="f280">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bluetooth-search zmdi-hc-fw"></i>
                          <span>bluetooth-search</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bluetooth-setting" data-code="f281">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bluetooth-setting zmdi-hc-fw"></i>
                          <span>bluetooth-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bluetooth" data-code="f282">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-bluetooth zmdi-hc-fw"></i>
                          <span>bluetooth</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-add" data-code="f283">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-add zmdi-hc-fw"></i>
                          <span>camera-add</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-alt" data-code="f284">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-alt zmdi-hc-fw"></i>
                          <span>camera-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-bw" data-code="f285">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-bw zmdi-hc-fw"></i>
                          <span>camera-bw</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-front" data-code="f286">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-front zmdi-hc-fw"></i>
                          <span>camera-front</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-mic" data-code="f287">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-mic zmdi-hc-fw"></i>
                          <span>camera-mic</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-party-mode" data-code="f288">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-party-mode zmdi-hc-fw"></i>
                          <span>camera-party-mode</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-rear" data-code="f289">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-rear zmdi-hc-fw"></i>
                          <span>camera-rear</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-roll" data-code="f28a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-roll zmdi-hc-fw"></i>
                          <span>camera-roll</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera-switch" data-code="f28b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera-switch zmdi-hc-fw"></i>
                          <span>camera-switch</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera" data-code="f28c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-camera zmdi-hc-fw"></i>
                          <span>camera</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-alert" data-code="f28d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-alert zmdi-hc-fw"></i>
                          <span>card-alert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-off" data-code="f28e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-off zmdi-hc-fw"></i>
                          <span>card-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-sd" data-code="f28f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-sd zmdi-hc-fw"></i>
                          <span>card-sd</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="card-sim" data-code="f290">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-card-sim zmdi-hc-fw"></i>
                          <span>card-sim</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="desktop-mac" data-code="f291">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-desktop-mac zmdi-hc-fw"></i>
                          <span>desktop-mac</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="desktop-windows" data-code="f292">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-desktop-windows zmdi-hc-fw"></i>
                          <span>desktop-windows</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="device-hub" data-code="f293">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-device-hub zmdi-hc-fw"></i>
                          <span>device-hub</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="devices-off" data-code="f294">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-devices-off zmdi-hc-fw"></i>
                          <span>devices-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="devices" data-code="f295">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-devices zmdi-hc-fw"></i>
                          <span>devices</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dock" data-code="f296">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dock zmdi-hc-fw"></i>
                          <span>dock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="floppy" data-code="f297">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-floppy zmdi-hc-fw"></i>
                          <span>floppy</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gamepad" data-code="f298">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gamepad zmdi-hc-fw"></i>
                          <span>gamepad</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gps-dot" data-code="f299">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gps-dot zmdi-hc-fw"></i>
                          <span>gps-dot</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gps-off" data-code="f29a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gps-off zmdi-hc-fw"></i>
                          <span>gps-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gps" data-code="f29b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gps zmdi-hc-fw"></i>
                          <span>gps</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="headset-mic" data-code="f29c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-headset-mic zmdi-hc-fw"></i>
                          <span>headset-mic</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="headset" data-code="f29d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-headset zmdi-hc-fw"></i>
                          <span>headset</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="input-antenna" data-code="f29e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-input-antenna zmdi-hc-fw"></i>
                          <span>input-antenna</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="input-composite" data-code="f29f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-input-composite zmdi-hc-fw"></i>
                          <span>input-composite</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="input-hdmi" data-code="f2a0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-input-hdmi zmdi-hc-fw"></i>
                          <span>input-hdmi</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="input-power" data-code="f2a1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-input-power zmdi-hc-fw"></i>
                          <span>input-power</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="input-svideo" data-code="f2a2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-input-svideo zmdi-hc-fw"></i>
                          <span>input-svideo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="keyboard-hide" data-code="f2a3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-keyboard-hide zmdi-hc-fw"></i>
                          <span>keyboard-hide</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="keyboard" data-code="f2a4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-keyboard zmdi-hc-fw"></i>
                          <span>keyboard</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="laptop-chromebook" data-code="f2a5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-laptop-chromebook zmdi-hc-fw"></i>
                          <span>laptop-chromebook</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="laptop-mac" data-code="f2a6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-laptop-mac zmdi-hc-fw"></i>
                          <span>laptop-mac</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="laptop" data-code="f2a7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-laptop zmdi-hc-fw"></i>
                          <span>laptop</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mic-off" data-code="f2a8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mic-off zmdi-hc-fw"></i>
                          <span>mic-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mic-outline" data-code="f2a9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mic-outline zmdi-hc-fw"></i>
                          <span>mic-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mic-setting" data-code="f2aa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mic-setting zmdi-hc-fw"></i>
                          <span>mic-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mic" data-code="f2ab">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mic zmdi-hc-fw"></i>
                          <span>mic</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mouse" data-code="f2ac">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-mouse zmdi-hc-fw"></i>
                          <span>mouse</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="network-alert" data-code="f2ad">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-network-alert zmdi-hc-fw"></i>
                          <span>network-alert</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="network-locked" data-code="f2ae">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-network-locked zmdi-hc-fw"></i>
                          <span>network-locked</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="network-off" data-code="f2af">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-network-off zmdi-hc-fw"></i>
                          <span>network-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="network-outline" data-code="f2b0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-network-outline zmdi-hc-fw"></i>
                          <span>network-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="network-setting" data-code="f2b1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-network-setting zmdi-hc-fw"></i>
                          <span>network-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="network" data-code="f2b2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-network zmdi-hc-fw"></i>
                          <span>network</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-bluetooth" data-code="f2b3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-bluetooth zmdi-hc-fw"></i>
                          <span>phone-bluetooth</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-end" data-code="f2b4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-end zmdi-hc-fw"></i>
                          <span>phone-end</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-forwarded" data-code="f2b5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-forwarded zmdi-hc-fw"></i>
                          <span>phone-forwarded</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-in-talk" data-code="f2b6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-in-talk zmdi-hc-fw"></i>
                          <span>phone-in-talk</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-locked" data-code="f2b7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-locked zmdi-hc-fw"></i>
                          <span>phone-locked</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-missed" data-code="f2b8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-missed zmdi-hc-fw"></i>
                          <span>phone-missed</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-msg" data-code="f2b9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-msg zmdi-hc-fw"></i>
                          <span>phone-msg</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-paused" data-code="f2ba">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-paused zmdi-hc-fw"></i>
                          <span>phone-paused</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-ring" data-code="f2bb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-ring zmdi-hc-fw"></i>
                          <span>phone-ring</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-setting" data-code="f2bc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-setting zmdi-hc-fw"></i>
                          <span>phone-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone-sip" data-code="f2bd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone-sip zmdi-hc-fw"></i>
                          <span>phone-sip</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone" data-code="f2be">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-phone zmdi-hc-fw"></i>
                          <span>phone</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="portable-wifi-changes" data-code="f2bf">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-portable-wifi-changes zmdi-hc-fw"></i>
                          <span>portable-wifi-changes</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="portable-wifi-off" data-code="f2c0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-portable-wifi-off zmdi-hc-fw"></i>
                          <span>portable-wifi-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="portable-wifi" data-code="f2c1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-portable-wifi zmdi-hc-fw"></i>
                          <span>portable-wifi</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="radio" data-code="f2c2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-radio zmdi-hc-fw"></i>
                          <span>radio</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="reader" data-code="f2c3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-reader zmdi-hc-fw"></i>
                          <span>reader</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="remote-control-alt" data-code="f2c4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-remote-control-alt zmdi-hc-fw"></i>
                          <span>remote-control-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="remote-control" data-code="f2c5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-remote-control zmdi-hc-fw"></i>
                          <span>remote-control</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="router" data-code="f2c6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-router zmdi-hc-fw"></i>
                          <span>router</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="scanner" data-code="f2c7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-scanner zmdi-hc-fw"></i>
                          <span>scanner</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-android" data-code="f2c8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-android zmdi-hc-fw"></i>
                          <span>smartphone-android</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-download" data-code="f2c9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-download zmdi-hc-fw"></i>
                          <span>smartphone-download</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-erase" data-code="f2ca">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-erase zmdi-hc-fw"></i>
                          <span>smartphone-erase</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-info" data-code="f2cb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-info zmdi-hc-fw"></i>
                          <span>smartphone-info</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-iphone" data-code="f2cc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-iphone zmdi-hc-fw"></i>
                          <span>smartphone-iphone</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-landscape-lock" data-code="f2cd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-landscape-lock zmdi-hc-fw"></i>
                          <span>smartphone-landscape-lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-landscape" data-code="f2ce">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-landscape zmdi-hc-fw"></i>
                          <span>smartphone-landscape</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-lock" data-code="f2cf">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-lock zmdi-hc-fw"></i>
                          <span>smartphone-lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-portrait-lock" data-code="f2d0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-portrait-lock zmdi-hc-fw"></i>
                          <span>smartphone-portrait-lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-ring" data-code="f2d1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-ring zmdi-hc-fw"></i>
                          <span>smartphone-ring</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-setting" data-code="f2d2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-setting zmdi-hc-fw"></i>
                          <span>smartphone-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone-setup" data-code="f2d3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone-setup zmdi-hc-fw"></i>
                          <span>smartphone-setup</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="smartphone" data-code="f2d4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-smartphone zmdi-hc-fw"></i>
                          <span>smartphone</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="speaker" data-code="f2d5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-speaker zmdi-hc-fw"></i>
                          <span>speaker</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tablet-android" data-code="f2d6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tablet-android zmdi-hc-fw"></i>
                          <span>tablet-android</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tablet-mac" data-code="f2d7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tablet-mac zmdi-hc-fw"></i>
                          <span>tablet-mac</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tablet" data-code="f2d8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tablet zmdi-hc-fw"></i>
                          <span>tablet</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tv-alt-play" data-code="f2d9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tv-alt-play zmdi-hc-fw"></i>
                          <span>tv-alt-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tv-list" data-code="f2da">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tv-list zmdi-hc-fw"></i>
                          <span>tv-list</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tv-play" data-code="f2db">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tv-play zmdi-hc-fw"></i>
                          <span>tv-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tv" data-code="f2dc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tv zmdi-hc-fw"></i>
                          <span>tv</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="usb" data-code="f2dd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-usb zmdi-hc-fw"></i>
                          <span>usb</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="videocam-off" data-code="f2de">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-videocam-off zmdi-hc-fw"></i>
                          <span>videocam-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="videocam-switch" data-code="f2df">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-videocam-switch zmdi-hc-fw"></i>
                          <span>videocam-switch</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="videocam" data-code="f2e0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-videocam zmdi-hc-fw"></i>
                          <span>videocam</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="watch" data-code="f2e1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-watch zmdi-hc-fw"></i>
                          <span>watch</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi-alt-2" data-code="f2e2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi-alt-2 zmdi-hc-fw"></i>
                          <span>wifi-alt-2</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi-alt" data-code="f2e3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi-alt zmdi-hc-fw"></i>
                          <span>wifi-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi-info" data-code="f2e4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi-info zmdi-hc-fw"></i>
                          <span>wifi-info</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi-lock" data-code="f2e5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi-lock zmdi-hc-fw"></i>
                          <span>wifi-lock</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi-off" data-code="f2e6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi-off zmdi-hc-fw"></i>
                          <span>wifi-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi-outline" data-code="f2e7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi-outline zmdi-hc-fw"></i>
                          <span>wifi-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wifi" data-code="f2e8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wifi zmdi-hc-fw"></i>
                          <span>wifi</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="directional">
                    <h2 class="color-primary mt-4 mb-2">Directional</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-left-bottom" data-code="f2e9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-left-bottom zmdi-hc-fw"></i>
                          <span>arrow-left-bottom</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-left" data-code="f2ea">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-left zmdi-hc-fw"></i>
                          <span>arrow-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-merge" data-code="f2eb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-merge zmdi-hc-fw"></i>
                          <span>arrow-merge</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-missed" data-code="f2ec">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-missed zmdi-hc-fw"></i>
                          <span>arrow-missed</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-right-top" data-code="f2ed">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-right-top zmdi-hc-fw"></i>
                          <span>arrow-right-top</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-right" data-code="f2ee">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-right zmdi-hc-fw"></i>
                          <span>arrow-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrow-split" data-code="f2ef">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrow-split zmdi-hc-fw"></i>
                          <span>arrow-split</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="arrows" data-code="f2f0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-arrows zmdi-hc-fw"></i>
                          <span>arrows</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-down-circle" data-code="f2f1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-down-circle zmdi-hc-fw"></i>
                          <span>caret-down-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-down" data-code="f2f2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-down zmdi-hc-fw"></i>
                          <span>caret-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-left-circle" data-code="f2f3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-left-circle zmdi-hc-fw"></i>
                          <span>caret-left-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-left" data-code="f2f4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-left zmdi-hc-fw"></i>
                          <span>caret-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-right-circle" data-code="f2f5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-right-circle zmdi-hc-fw"></i>
                          <span>caret-right-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-right" data-code="f2f6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-right zmdi-hc-fw"></i>
                          <span>caret-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-up-circle" data-code="f2f7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-up-circle zmdi-hc-fw"></i>
                          <span>caret-up-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="caret-up" data-code="f2f8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-caret-up zmdi-hc-fw"></i>
                          <span>caret-up</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="chevron-down" data-code="f2f9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-chevron-down zmdi-hc-fw"></i>
                          <span>chevron-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="chevron-left" data-code="f2fa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-chevron-left zmdi-hc-fw"></i>
                          <span>chevron-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="chevron-right" data-code="f2fb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-chevron-right zmdi-hc-fw"></i>
                          <span>chevron-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="chevron-up" data-code="f2fc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-chevron-up zmdi-hc-fw"></i>
                          <span>chevron-up</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="forward" data-code="f2fd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-forward zmdi-hc-fw"></i>
                          <span>forward</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="long-arrow-down" data-code="f2fe">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-long-arrow-down zmdi-hc-fw"></i>
                          <span>long-arrow-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="long-arrow-left" data-code="f2ff">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-long-arrow-left zmdi-hc-fw"></i>
                          <span>long-arrow-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="long-arrow-return" data-code="f300">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-long-arrow-return zmdi-hc-fw"></i>
                          <span>long-arrow-return</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="long-arrow-right" data-code="f301">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-long-arrow-right zmdi-hc-fw"></i>
                          <span>long-arrow-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="long-arrow-tab" data-code="f302">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-long-arrow-tab zmdi-hc-fw"></i>
                          <span>long-arrow-tab</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="long-arrow-up" data-code="f303">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-long-arrow-up zmdi-hc-fw"></i>
                          <span>long-arrow-up</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="rotate-ccw" data-code="f304">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-rotate-ccw zmdi-hc-fw"></i>
                          <span>rotate-ccw</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="rotate-cw" data-code="f305">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-rotate-cw zmdi-hc-fw"></i>
                          <span>rotate-cw</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="rotate-left" data-code="f306">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-rotate-left zmdi-hc-fw"></i>
                          <span>rotate-left</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="rotate-right" data-code="f307">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-rotate-right zmdi-hc-fw"></i>
                          <span>rotate-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="square-down" data-code="f308">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-square-down zmdi-hc-fw"></i>
                          <span>square-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="square-right" data-code="f309">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-square-right zmdi-hc-fw"></i>
                          <span>square-right</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="swap-alt" data-code="f30a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-swap-alt zmdi-hc-fw"></i>
                          <span>swap-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="swap-vertical-circle" data-code="f30b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-swap-vertical-circle zmdi-hc-fw"></i>
                          <span>swap-vertical-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="swap-vertical" data-code="f30c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-swap-vertical zmdi-hc-fw"></i>
                          <span>swap-vertical</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="swap" data-code="f30d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-swap zmdi-hc-fw"></i>
                          <span>swap</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="trending-down" data-code="f30e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-trending-down zmdi-hc-fw"></i>
                          <span>trending-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="trending-flat" data-code="f30f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-trending-flat zmdi-hc-fw"></i>
                          <span>trending-flat</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="trending-up" data-code="f310">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-trending-up zmdi-hc-fw"></i>
                          <span>trending-up</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="unfold-less" data-code="f311">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-unfold-less zmdi-hc-fw"></i>
                          <span>unfold-less</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="unfold-more" data-code="f312">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-unfold-more zmdi-hc-fw"></i>
                          <span>unfold-more</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="map">
                    <h2 class="color-primary mt-4 mb-2">Map (aliases)</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="bike" data-code="f117">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-bike zmdi-hc-fw"></i> zmdi-directions-bike</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="boat" data-code="f11a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-boat zmdi-hc-fw"></i> zmdi-directions-boat</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="bus" data-code="f121">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-bus zmdi-hc-fw"></i> zmdi-directions-bus</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="car" data-code="f125">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-car zmdi-hc-fw"></i> zmdi-directions-car</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="railway" data-code="f1b3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-railway zmdi-hc-fw"></i> zmdi-directions-railway</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="run" data-code="f215">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-run zmdi-hc-fw"></i> zmdi-directions-run</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="subway" data-code="f1d5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-subway zmdi-hc-fw"></i> zmdi-directions-subway</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="walk" data-code="f216">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions-walk zmdi-hc-fw"></i> zmdi-directions-walk</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="turning-sign" data-code="f1e7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-directions zmdi-hc-fw"></i> zmdi-directions</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="layers-off" data-code="f18b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-layers-off zmdi-hc-fw"></i> zmdi-layers-off</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="layers" data-code="f18c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-layers zmdi-hc-fw"></i> zmdi-layers</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="ticket-star" data-code="f1df">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-activity zmdi-hc-fw"></i> zmdi-local-activity</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airplane" data-code="f103">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-airport zmdi-hc-fw"></i> zmdi-local-airport</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="money-box" data-code="f198">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-atm zmdi-hc-fw"></i> zmdi-local-atm</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cocktail" data-code="f137">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-bar zmdi-hc-fw"></i> zmdi-local-bar</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="coffee" data-code="f13b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-cafe zmdi-hc-fw"></i> zmdi-local-cafe</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="car-wash" data-code="f124">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-car-wash zmdi-hc-fw"></i> zmdi-local-car-wash</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="store-24" data-code="f1d3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-convenience-store zmdi-hc-fw"></i> zmdi-local-convenience-store</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="cutlery" data-code="f153">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-dining zmdi-hc-fw"></i> zmdi-local-dining</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="drink" data-code="f157">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-drink zmdi-hc-fw"></i> zmdi-local-drink</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flower-alt" data-code="f168">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-florist zmdi-hc-fw"></i> zmdi-local-florist</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gas-station" data-code="f16f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-gas-station zmdi-hc-fw"></i> zmdi-local-gas-station</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shopping-cart" data-code="f1cb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-grocery-store zmdi-hc-fw"></i> zmdi-local-grocery-store</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hospital" data-code="f177">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-hospital zmdi-hc-fw"></i> zmdi-local-hospital</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hotel" data-code="f178">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-hotel zmdi-hc-fw"></i> zmdi-local-hotel</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="washing-machine" data-code="f1e9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-laundry-service zmdi-hc-fw"></i> zmdi-local-laundry-service</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="library" data-code="f18d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-library zmdi-hc-fw"></i> zmdi-local-library</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="mall" data-code="f195">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-mall zmdi-hc-fw"></i> zmdi-local-mall</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="movie-alt" data-code="f19d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-movies zmdi-hc-fw"></i> zmdi-local-movies</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="label" data-code="f187">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-offer zmdi-hc-fw"></i> zmdi-local-offer</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="parking" data-code="f1a5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-parking zmdi-hc-fw"></i> zmdi-local-parking</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hospital-alt" data-code="f176">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-pharmacy zmdi-hc-fw"></i> zmdi-local-pharmacy</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="phone" data-code="f2be">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-phone zmdi-hc-fw"></i> zmdi-local-phone</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pizza" data-code="f1ac">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-pizza zmdi-hc-fw"></i> zmdi-local-pizza</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="ticket-star" data-code="f1df">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-activity zmdi-hc-fw"></i> zmdi-local-activity</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="email" data-code="f15a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-post-office zmdi-hc-fw"></i> zmdi-local-post-office</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="print" data-code="f1b0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-printshop zmdi-hc-fw"></i> zmdi-local-printshop</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="camera" data-code="f28c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-see zmdi-hc-fw"></i> zmdi-local-see</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="truck" data-code="f1e6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-shipping zmdi-hc-fw"></i> zmdi-local-shipping</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="store" data-code="f1d4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-store zmdi-hc-fw"></i> zmdi-local-store</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="car-taxi" data-code="f123">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-taxi zmdi-hc-fw"></i> zmdi-local-taxi</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="male-female" data-code="f211">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-local-wc zmdi-hc-fw"></i> zmdi-local-wc</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="map" data-code="f196">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-map zmdi-hc-fw"></i> zmdi-map</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gps-dot" data-code="f299">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-my-location zmdi-hc-fw"></i> zmdi-my-location</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="nature-people" data-code="f19f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-nature-people zmdi-hc-fw"></i> zmdi-nature-people</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="nature" data-code="f1a0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-nature zmdi-hc-fw"></i> zmdi-nature</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="navigation" data-code="f1a1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-navigation zmdi-hc-fw"></i> zmdi-navigation</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-account" data-code="f1a6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-account zmdi-hc-fw"></i> zmdi-pin-account</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-assistant" data-code="f1a7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-assistant zmdi-hc-fw"></i> zmdi-pin-assistant</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-drop" data-code="f1a8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-drop zmdi-hc-fw"></i> zmdi-pin-drop</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-help" data-code="f1a9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-help zmdi-hc-fw"></i> zmdi-pin-help</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin-off" data-code="f1aa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin-off zmdi-hc-fw"></i> zmdi-pin-off</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pin" data-code="f1ab">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pin zmdi-hc-fw"></i> zmdi-pin</a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="traffic" data-code="f1e2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-traffic zmdi-hc-fw"></i> zmdi-traffic</a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="view">
                    <h2 class="color-primary mt-4 mb-2">View</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="apps" data-code="f313">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-apps zmdi-hc-fw"></i>
                          <span>apps</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="grid-off" data-code="f314">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-grid-off zmdi-hc-fw"></i>
                          <span>grid-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="grid" data-code="f315">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-grid zmdi-hc-fw"></i>
                          <span>grid</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-agenda" data-code="f316">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-agenda zmdi-hc-fw"></i>
                          <span>view-agenda</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-array" data-code="f317">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-array zmdi-hc-fw"></i>
                          <span>view-array</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-carousel" data-code="f318">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-carousel zmdi-hc-fw"></i>
                          <span>view-carousel</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-column" data-code="f319">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-column zmdi-hc-fw"></i>
                          <span>view-column</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-comfy" data-code="f31a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-comfy zmdi-hc-fw"></i>
                          <span>view-comfy</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-compact" data-code="f31b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-compact zmdi-hc-fw"></i>
                          <span>view-compact</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-dashboard" data-code="f31c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-dashboard zmdi-hc-fw"></i>
                          <span>view-dashboard</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-day" data-code="f31d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-day zmdi-hc-fw"></i>
                          <span>view-day</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-headline" data-code="f31e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-headline zmdi-hc-fw"></i>
                          <span>view-headline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-list-alt" data-code="f31f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-list-alt zmdi-hc-fw"></i>
                          <span>view-list-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-list" data-code="f320">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-list zmdi-hc-fw"></i>
                          <span>view-list</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-module" data-code="f321">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-module zmdi-hc-fw"></i>
                          <span>view-module</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-quilt" data-code="f322">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-quilt zmdi-hc-fw"></i>
                          <span>view-quilt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-stream" data-code="f323">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-stream zmdi-hc-fw"></i>
                          <span>view-stream</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-subtitles" data-code="f324">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-subtitles zmdi-hc-fw"></i>
                          <span>view-subtitles</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-toc" data-code="f325">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-toc zmdi-hc-fw"></i>
                          <span>view-toc</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-web" data-code="f326">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-web zmdi-hc-fw"></i>
                          <span>view-web</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="view-week" data-code="f327">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-view-week zmdi-hc-fw"></i>
                          <span>view-week</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="widgets" data-code="f328">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-widgets zmdi-hc-fw"></i>
                          <span>widgets</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="time">
                    <h2 class="color-primary mt-4 mb-2">Date / Time</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="alarm-check" data-code="f329">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alarm-check zmdi-hc-fw"></i>
                          <span>alarm-check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alarm-off" data-code="f32a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alarm-off zmdi-hc-fw"></i>
                          <span>alarm-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alarm-plus" data-code="f32b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alarm-plus zmdi-hc-fw"></i>
                          <span>alarm-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alarm-snooze" data-code="f32c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alarm-snooze zmdi-hc-fw"></i>
                          <span>alarm-snooze</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="alarm" data-code="f32d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-alarm zmdi-hc-fw"></i>
                          <span>alarm</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="calendar-alt" data-code="f32e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-calendar-alt zmdi-hc-fw"></i>
                          <span>calendar-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="calendar-check" data-code="f32f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-calendar-check zmdi-hc-fw"></i>
                          <span>calendar-check</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="calendar-close" data-code="f330">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-calendar-close zmdi-hc-fw"></i>
                          <span>calendar-close</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="calendar-note" data-code="f331">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-calendar-note zmdi-hc-fw"></i>
                          <span>calendar-note</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="calendar" data-code="f332">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-calendar zmdi-hc-fw"></i>
                          <span>calendar</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="time-countdown" data-code="f333">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-time-countdown zmdi-hc-fw"></i>
                          <span>time-countdown</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="time-interval" data-code="f334">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-time-interval zmdi-hc-fw"></i>
                          <span>time-interval</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="time-restore-setting" data-code="f335">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-time-restore-setting zmdi-hc-fw"></i>
                          <span>time-restore-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="time-restore" data-code="f336">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-time-restore zmdi-hc-fw"></i>
                          <span>time-restore</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="time" data-code="f337">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-time zmdi-hc-fw"></i>
                          <span>time</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="timer-off" data-code="f338">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-timer-off zmdi-hc-fw"></i>
                          <span>timer-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="timer" data-code="f339">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-timer zmdi-hc-fw"></i>
                          <span>timer</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="social">
                    <h2 class="color-primary mt-4 mb-2">Social</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="android-alt" data-code="f33a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-android-alt zmdi-hc-fw"></i>
                          <span>android-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="android" data-code="f33b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-android zmdi-hc-fw"></i>
                          <span>android</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="apple" data-code="f33c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-apple zmdi-hc-fw"></i>
                          <span>apple</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="behance" data-code="f33d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-behance zmdi-hc-fw"></i>
                          <span>behance</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="codepen" data-code="f33e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-codepen zmdi-hc-fw"></i>
                          <span>codepen</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dribbble" data-code="f33f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dribbble zmdi-hc-fw"></i>
                          <span>dribbble</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="dropbox" data-code="f340">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-dropbox zmdi-hc-fw"></i>
                          <span>dropbox</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="evernote" data-code="f341">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-evernote zmdi-hc-fw"></i>
                          <span>evernote</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="facebook-box" data-code="f342">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-facebook-box zmdi-hc-fw"></i>
                          <span>facebook-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="facebook" data-code="f343">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-facebook zmdi-hc-fw"></i>
                          <span>facebook</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="github-box" data-code="f344">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-github-box zmdi-hc-fw"></i>
                          <span>github-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="github" data-code="f345">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-github zmdi-hc-fw"></i>
                          <span>github</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-drive" data-code="f346">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-drive zmdi-hc-fw"></i>
                          <span>google-drive</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-earth" data-code="f347">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-earth zmdi-hc-fw"></i>
                          <span>google-earth</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-glass" data-code="f348">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-glass zmdi-hc-fw"></i>
                          <span>google-glass</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-maps" data-code="f349">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-maps zmdi-hc-fw"></i>
                          <span>google-maps</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-pages" data-code="f34a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-pages zmdi-hc-fw"></i>
                          <span>google-pages</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-play" data-code="f34b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-play zmdi-hc-fw"></i>
                          <span>google-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-plus-box" data-code="f34c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-plus-box zmdi-hc-fw"></i>
                          <span>google-plus-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-plus" data-code="f34d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-plus zmdi-hc-fw"></i>
                          <span>google-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google" data-code="f34e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google zmdi-hc-fw"></i>
                          <span>google</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="instagram" data-code="f34f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-instagram zmdi-hc-fw"></i>
                          <span>instagram</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="language-css3" data-code="f350">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-language-css3 zmdi-hc-fw"></i>
                          <span>language-css3</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="language-html5" data-code="f351">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-language-html5 zmdi-hc-fw"></i>
                          <span>language-html5</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="language-javascript" data-code="f352">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-language-javascript zmdi-hc-fw"></i>
                          <span>language-javascript</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="language-python-alt" data-code="f353">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-language-python-alt zmdi-hc-fw"></i>
                          <span>language-python-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="language-python" data-code="f354">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-language-python zmdi-hc-fw"></i>
                          <span>language-python</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="lastfm" data-code="f355">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-lastfm zmdi-hc-fw"></i>
                          <span>lastfm</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="linkedin-box" data-code="f356">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-linkedin-box zmdi-hc-fw"></i>
                          <span>linkedin-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="paypal" data-code="f357">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-paypal zmdi-hc-fw"></i>
                          <span>paypal</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pinterest-box" data-code="f358">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pinterest-box zmdi-hc-fw"></i>
                          <span>pinterest-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pocket" data-code="f359">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pocket zmdi-hc-fw"></i>
                          <span>pocket</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="polymer" data-code="f35a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-polymer zmdi-hc-fw"></i>
                          <span>polymer</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="rss" data-code="f3ea">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-rss zmdi-hc-fw"></i>
                          <span>rss</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="share" data-code="f35b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-share zmdi-hc-fw"></i>
                          <span>share</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="stackoverflow" data-code="f35c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-stackoverflow zmdi-hc-fw"></i>
                          <span>stackoverflow</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="steam-square" data-code="f35d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-steam-square zmdi-hc-fw"></i>
                          <span>steam-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="steam" data-code="f35e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-steam zmdi-hc-fw"></i>
                          <span>steam</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="twitter-box" data-code="f35f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-twitter-box zmdi-hc-fw"></i>
                          <span>twitter-box</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="twitter" data-code="f360">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-twitter zmdi-hc-fw"></i>
                          <span>twitter</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="vk" data-code="f361">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-vk zmdi-hc-fw"></i>
                          <span>vk</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wikipedia" data-code="f362">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wikipedia zmdi-hc-fw"></i>
                          <span>wikipedia</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="windows" data-code="f363">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-windows zmdi-hc-fw"></i>
                          <span>windows</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="500px" data-code="f3ee">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-500px zmdi-hc-fw"></i>
                          <span>500px</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="8tracks" data-code="f3ef">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-8tracks zmdi-hc-fw"></i>
                          <span>8tracks</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="amazon" data-code="f3f0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-amazon zmdi-hc-fw"></i>
                          <span>amazon</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="blogger" data-code="f3f1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-blogger zmdi-hc-fw"></i>
                          <span>blogger</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="delicious" data-code="f3f2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-delicious zmdi-hc-fw"></i>
                          <span>delicious</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="disqus" data-code="f3f3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-disqus zmdi-hc-fw"></i>
                          <span>disqus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flattr" data-code="f3f4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flattr zmdi-hc-fw"></i>
                          <span>flattr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flickr" data-code="f3f5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flickr zmdi-hc-fw"></i>
                          <span>flickr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="github-alt" data-code="f3f6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-github-alt zmdi-hc-fw"></i>
                          <span>github-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="google-old" data-code="f3f7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-google-old zmdi-hc-fw"></i>
                          <span>google-old</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="linkedin" data-code="f3f8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-linkedin zmdi-hc-fw"></i>
                          <span>linkedin</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="odnoklassniki" data-code="f3f9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-odnoklassniki zmdi-hc-fw"></i>
                          <span>odnoklassniki</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="outlook" data-code="f3fa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-outlook zmdi-hc-fw"></i>
                          <span>outlook</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="paypal-alt" data-code="f3fb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-paypal-alt zmdi-hc-fw"></i>
                          <span>paypal-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pinterest" data-code="f3fc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pinterest zmdi-hc-fw"></i>
                          <span>pinterest</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="playstation" data-code="f3fd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-playstation zmdi-hc-fw"></i>
                          <span>playstation</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="reddit" data-code="f3fe">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-reddit zmdi-hc-fw"></i>
                          <span>reddit</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="skype" data-code="f3ff">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-skype zmdi-hc-fw"></i>
                          <span>skype</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="slideshare" data-code="f400">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-slideshare zmdi-hc-fw"></i>
                          <span>slideshare</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="soundcloud" data-code="f401">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-soundcloud zmdi-hc-fw"></i>
                          <span>soundcloud</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tumblr" data-code="f402">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tumblr zmdi-hc-fw"></i>
                          <span>tumblr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="twitch" data-code="f403">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-twitch zmdi-hc-fw"></i>
                          <span>twitch</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="vimeo" data-code="f404">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-vimeo zmdi-hc-fw"></i>
                          <span>vimeo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="whatsapp" data-code="f405">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-whatsapp zmdi-hc-fw"></i>
                          <span>whatsapp</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="xbox" data-code="f406">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-xbox zmdi-hc-fw"></i>
                          <span>xbox</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="yahoo" data-code="f407">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-yahoo zmdi-hc-fw"></i>
                          <span>yahoo</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="youtube-play" data-code="f408">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-youtube-play zmdi-hc-fw"></i>
                          <span>youtube-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="youtube" data-code="f409">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-youtube zmdi-hc-fw"></i>
                          <span>youtube</span>
                        </a>
                      </div>
                    </div>
                    <div class="alert alert-warning alert-light alert-dismissible">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <i class="zmdi zmdi-close"></i>
                      </button>
                      <h4 class="mt-0">
                        <i class="mr-1 zmdi zmdi-alert-triangle"></i> Warning!</h4> Apparently, Adblock Plus can remove social icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please
                      <a href="https://adblockplus.org/en/bugs">report an issue with Adblock Plus</a> if you believe this to be an error. To work around this, you'll need to modify the social icon class names. </div>
                  </section>
                  <section class="icon-set" id="image">
                    <h2 class="color-primary mt-4 mb-2">Image</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="aspect-ratio-alt" data-code="f364">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-aspect-ratio-alt zmdi-hc-fw"></i>
                          <span>aspect-ratio-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="aspect-ratio" data-code="f365">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-aspect-ratio zmdi-hc-fw"></i>
                          <span>aspect-ratio</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="blur-circular" data-code="f366">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-blur-circular zmdi-hc-fw"></i>
                          <span>blur-circular</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="blur-linear" data-code="f367">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-blur-linear zmdi-hc-fw"></i>
                          <span>blur-linear</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="blur-off" data-code="f368">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-blur-off zmdi-hc-fw"></i>
                          <span>blur-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="blur" data-code="f369">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-blur zmdi-hc-fw"></i>
                          <span>blur</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-2" data-code="f36a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-2 zmdi-hc-fw"></i>
                          <span>brightness-2</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-3" data-code="f36b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-3 zmdi-hc-fw"></i>
                          <span>brightness-3</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-4" data-code="f36c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-4 zmdi-hc-fw"></i>
                          <span>brightness-4</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-5" data-code="f36d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-5 zmdi-hc-fw"></i>
                          <span>brightness-5</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-6" data-code="f36e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-6 zmdi-hc-fw"></i>
                          <span>brightness-6</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-7" data-code="f36f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-7 zmdi-hc-fw"></i>
                          <span>brightness-7</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-auto" data-code="f370">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-auto zmdi-hc-fw"></i>
                          <span>brightness-auto</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="brightness-setting" data-code="f371">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-brightness-setting zmdi-hc-fw"></i>
                          <span>brightness-setting</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="broken-image" data-code="f372">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-broken-image zmdi-hc-fw"></i>
                          <span>broken-image</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="center-focus-strong" data-code="f373">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-center-focus-strong zmdi-hc-fw"></i>
                          <span>center-focus-strong</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="center-focus-weak" data-code="f374">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-center-focus-weak zmdi-hc-fw"></i>
                          <span>center-focus-weak</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="compare" data-code="f375">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-compare zmdi-hc-fw"></i>
                          <span>compare</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-16-9" data-code="f376">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-16-9 zmdi-hc-fw"></i>
                          <span>crop-16-9</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-3-2" data-code="f377">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-3-2 zmdi-hc-fw"></i>
                          <span>crop-3-2</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-5-4" data-code="f378">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-5-4 zmdi-hc-fw"></i>
                          <span>crop-5-4</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-7-5" data-code="f379">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-7-5 zmdi-hc-fw"></i>
                          <span>crop-7-5</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-din" data-code="f37a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-din zmdi-hc-fw"></i>
                          <span>crop-din</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-free" data-code="f37b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-free zmdi-hc-fw"></i>
                          <span>crop-free</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-landscape" data-code="f37c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-landscape zmdi-hc-fw"></i>
                          <span>crop-landscape</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-portrait" data-code="f37d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-portrait zmdi-hc-fw"></i>
                          <span>crop-portrait</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="crop-square" data-code="f37e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-crop-square zmdi-hc-fw"></i>
                          <span>crop-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="exposure-alt" data-code="f37f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-exposure-alt zmdi-hc-fw"></i>
                          <span>exposure-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="exposure" data-code="f380">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-exposure zmdi-hc-fw"></i>
                          <span>exposure</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="filter-b-and-w" data-code="f381">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-filter-b-and-w zmdi-hc-fw"></i>
                          <span>filter-b-and-w</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="filter-center-focus" data-code="f382">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-filter-center-focus zmdi-hc-fw"></i>
                          <span>filter-center-focus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="filter-frames" data-code="f383">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-filter-frames zmdi-hc-fw"></i>
                          <span>filter-frames</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="filter-tilt-shift" data-code="f384">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-filter-tilt-shift zmdi-hc-fw"></i>
                          <span>filter-tilt-shift</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="gradient" data-code="f385">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-gradient zmdi-hc-fw"></i>
                          <span>gradient</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="grain" data-code="f386">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-grain zmdi-hc-fw"></i>
                          <span>grain</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="graphic-eq" data-code="f387">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-graphic-eq zmdi-hc-fw"></i>
                          <span>graphic-eq</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hdr-off" data-code="f388">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hdr-off zmdi-hc-fw"></i>
                          <span>hdr-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hdr-strong" data-code="f389">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hdr-strong zmdi-hc-fw"></i>
                          <span>hdr-strong</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hdr-weak" data-code="f38a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hdr-weak zmdi-hc-fw"></i>
                          <span>hdr-weak</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hdr" data-code="f38b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hdr zmdi-hc-fw"></i>
                          <span>hdr</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="iridescent" data-code="f38c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-iridescent zmdi-hc-fw"></i>
                          <span>iridescent</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="leak-off" data-code="f38d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-leak-off zmdi-hc-fw"></i>
                          <span>leak-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="leak" data-code="f38e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-leak zmdi-hc-fw"></i>
                          <span>leak</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="looks" data-code="f38f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-looks zmdi-hc-fw"></i>
                          <span>looks</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="loupe" data-code="f390">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-loupe zmdi-hc-fw"></i>
                          <span>loupe</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="panorama-horizontal" data-code="f391">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-panorama-horizontal zmdi-hc-fw"></i>
                          <span>panorama-horizontal</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="panorama-vertical" data-code="f392">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-panorama-vertical zmdi-hc-fw"></i>
                          <span>panorama-vertical</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="panorama-wide-angle" data-code="f393">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-panorama-wide-angle zmdi-hc-fw"></i>
                          <span>panorama-wide-angle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="photo-size-select-large" data-code="f394">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-photo-size-select-large zmdi-hc-fw"></i>
                          <span>photo-size-select-large</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="photo-size-select-small" data-code="f395">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-photo-size-select-small zmdi-hc-fw"></i>
                          <span>photo-size-select-small</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="picture-in-picture" data-code="f396">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-picture-in-picture zmdi-hc-fw"></i>
                          <span>picture-in-picture</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="slideshow" data-code="f397">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-slideshow zmdi-hc-fw"></i>
                          <span>slideshow</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="texture" data-code="f398">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-texture zmdi-hc-fw"></i>
                          <span>texture</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tonality" data-code="f399">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tonality zmdi-hc-fw"></i>
                          <span>tonality</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="vignette" data-code="f39a">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-vignette zmdi-hc-fw"></i>
                          <span>vignette</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="wb-auto" data-code="f39b">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-wb-auto zmdi-hc-fw"></i>
                          <span>wb-auto</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="av">
                    <h2 class="color-primary mt-4 mb-2">Audio / Video</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="eject-alt" data-code="f39c">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-eject-alt zmdi-hc-fw"></i>
                          <span>eject-alt</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="eject" data-code="f39d">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-eject zmdi-hc-fw"></i>
                          <span>eject</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="equalizer" data-code="f39e">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-equalizer zmdi-hc-fw"></i>
                          <span>equalizer</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="fast-forward" data-code="f39f">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-fast-forward zmdi-hc-fw"></i>
                          <span>fast-forward</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="fast-rewind" data-code="f3a0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-fast-rewind zmdi-hc-fw"></i>
                          <span>fast-rewind</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="forward-10" data-code="f3a1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-forward-10 zmdi-hc-fw"></i>
                          <span>forward-10</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="forward-30" data-code="f3a2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-forward-30 zmdi-hc-fw"></i>
                          <span>forward-30</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="forward-5" data-code="f3a3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-forward-5 zmdi-hc-fw"></i>
                          <span>forward-5</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hearing" data-code="f3a4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hearing zmdi-hc-fw"></i>
                          <span>hearing</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pause-circle-outline" data-code="f3a5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pause-circle-outline zmdi-hc-fw"></i>
                          <span>pause-circle-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pause-circle" data-code="f3a6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pause-circle zmdi-hc-fw"></i>
                          <span>pause-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="pause" data-code="f3a7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-pause zmdi-hc-fw"></i>
                          <span>pause</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="play-circle-outline" data-code="f3a8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-play-circle-outline zmdi-hc-fw"></i>
                          <span>play-circle-outline</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="play-circle" data-code="f3a9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-play-circle zmdi-hc-fw"></i>
                          <span>play-circle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="play" data-code="f3aa">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-play zmdi-hc-fw"></i>
                          <span>play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="playlist-audio" data-code="f3ab">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-playlist-audio zmdi-hc-fw"></i>
                          <span>playlist-audio</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="playlist-plus" data-code="f3ac">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-playlist-plus zmdi-hc-fw"></i>
                          <span>playlist-plus</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="repeat-one" data-code="f3ad">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-repeat-one zmdi-hc-fw"></i>
                          <span>repeat-one</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="repeat" data-code="f3ae">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-repeat zmdi-hc-fw"></i>
                          <span>repeat</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="replay-10" data-code="f3af">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-replay-10 zmdi-hc-fw"></i>
                          <span>replay-10</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="replay-30" data-code="f3b0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-replay-30 zmdi-hc-fw"></i>
                          <span>replay-30</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="replay-5" data-code="f3b1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-replay-5 zmdi-hc-fw"></i>
                          <span>replay-5</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="replay" data-code="f3b2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-replay zmdi-hc-fw"></i>
                          <span>replay</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="shuffle" data-code="f3b3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-shuffle zmdi-hc-fw"></i>
                          <span>shuffle</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="skip-next" data-code="f3b4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-skip-next zmdi-hc-fw"></i>
                          <span>skip-next</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="skip-previous" data-code="f3b5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-skip-previous zmdi-hc-fw"></i>
                          <span>skip-previous</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="stop" data-code="f3b6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-stop zmdi-hc-fw"></i>
                          <span>stop</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="surround-sound" data-code="f3b7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-surround-sound zmdi-hc-fw"></i>
                          <span>surround-sound</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tune" data-code="f3b8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tune zmdi-hc-fw"></i>
                          <span>tune</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="volume-down" data-code="f3b9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-volume-down zmdi-hc-fw"></i>
                          <span>volume-down</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="volume-mute" data-code="f3ba">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-volume-mute zmdi-hc-fw"></i>
                          <span>volume-mute</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="volume-off" data-code="f3bb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-volume-off zmdi-hc-fw"></i>
                          <span>volume-off</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="volume-up" data-code="f3bc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-volume-up zmdi-hc-fw"></i>
                          <span>volume-up</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="numbers">
                    <h2 class="color-primary mt-4 mb-2">Numbers</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="n-1-square" data-code="f3bd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-n-1-square zmdi-hc-fw"></i>
                          <span>n-1-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="n-2-square" data-code="f3be">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-n-2-square zmdi-hc-fw"></i>
                          <span>n-2-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="n-3-square" data-code="f3bf">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-n-3-square zmdi-hc-fw"></i>
                          <span>n-3-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="n-4-square" data-code="f3c0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-n-4-square zmdi-hc-fw"></i>
                          <span>n-4-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="n-5-square" data-code="f3c1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-n-5-square zmdi-hc-fw"></i>
                          <span>n-5-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="n-6-square" data-code="f3c2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-n-6-square zmdi-hc-fw"></i>
                          <span>n-6-square</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="neg-1" data-code="f3c3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-neg-1 zmdi-hc-fw"></i>
                          <span>neg-1</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="neg-2" data-code="f3c4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-neg-2 zmdi-hc-fw"></i>
                          <span>neg-2</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus-1" data-code="f3c5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus-1 zmdi-hc-fw"></i>
                          <span>plus-1</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="plus-2" data-code="f3c6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-plus-2 zmdi-hc-fw"></i>
                          <span>plus-2</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sec-10" data-code="f3c7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sec-10 zmdi-hc-fw"></i>
                          <span>sec-10</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="sec-3" data-code="f3c8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-sec-3 zmdi-hc-fw"></i>
                          <span>sec-3</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="zero" data-code="f3c9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-zero zmdi-hc-fw"></i>
                          <span>zero</span>
                        </a>
                      </div>
                    </div>
                  </section>
                  <section class="icon-set" id="other">
                    <h2 class="color-primary mt-4 mb-2">Other</h2>
                    <div class="clearfix row">
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-flat-angled" data-code="f3ca">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-flat-angled zmdi-hc-fw"></i>
                          <span>airline-seat-flat-angled</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-flat" data-code="f3cb">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-flat zmdi-hc-fw"></i>
                          <span>airline-seat-flat</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-individual-suite" data-code="f3cc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-individual-suite zmdi-hc-fw"></i>
                          <span>airline-seat-individual-suite</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-legroom-extra" data-code="f3cd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-legroom-extra zmdi-hc-fw"></i>
                          <span>airline-seat-legroom-extra</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-legroom-normal" data-code="f3ce">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-legroom-normal zmdi-hc-fw"></i>
                          <span>airline-seat-legroom-normal</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-legroom-reduced" data-code="f3cf">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-legroom-reduced zmdi-hc-fw"></i>
                          <span>airline-seat-legroom-reduced</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-recline-extra" data-code="f3d0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-recline-extra zmdi-hc-fw"></i>
                          <span>airline-seat-recline-extra</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airline-seat-recline-normal" data-code="f3d1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airline-seat-recline-normal zmdi-hc-fw"></i>
                          <span>airline-seat-recline-normal</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="airplay" data-code="f3d2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-airplay zmdi-hc-fw"></i>
                          <span>airplay</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="closed-caption" data-code="f3d3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-closed-caption zmdi-hc-fw"></i>
                          <span>closed-caption</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="confirmation-number" data-code="f3d4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-confirmation-number zmdi-hc-fw"></i>
                          <span>confirmation-number</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="developer-board" data-code="f3d5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-developer-board zmdi-hc-fw"></i>
                          <span>developer-board</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="disc-full" data-code="f3d6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-disc-full zmdi-hc-fw"></i>
                          <span>disc-full</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="explicit" data-code="f3d7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-explicit zmdi-hc-fw"></i>
                          <span>explicit</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flight-land" data-code="f3d8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flight-land zmdi-hc-fw"></i>
                          <span>flight-land</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flight-takeoff" data-code="f3d9">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flight-takeoff zmdi-hc-fw"></i>
                          <span>flight-takeoff</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flip-to-back" data-code="f3da">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flip-to-back zmdi-hc-fw"></i>
                          <span>flip-to-back</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="flip-to-front" data-code="f3db">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-flip-to-front zmdi-hc-fw"></i>
                          <span>flip-to-front</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="group-work" data-code="f3dc">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-group-work zmdi-hc-fw"></i>
                          <span>group-work</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hd" data-code="f3dd">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hd zmdi-hc-fw"></i>
                          <span>hd</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="hq" data-code="f3de">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-hq zmdi-hc-fw"></i>
                          <span>hq</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="markunread-mailbox" data-code="f3df">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-markunread-mailbox zmdi-hc-fw"></i>
                          <span>markunread-mailbox</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="memory" data-code="f3e0">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-memory zmdi-hc-fw"></i>
                          <span>memory</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="nfc" data-code="f3e1">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-nfc zmdi-hc-fw"></i>
                          <span>nfc</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="play-for-work" data-code="f3e2">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-play-for-work zmdi-hc-fw"></i>
                          <span>play-for-work</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="power-input" data-code="f3e3">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-power-input zmdi-hc-fw"></i>
                          <span>power-input</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="present-to-all" data-code="f3e4">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-present-to-all zmdi-hc-fw"></i>
                          <span>present-to-all</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="satellite" data-code="f3e5">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-satellite zmdi-hc-fw"></i>
                          <span>satellite</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="tap-and-play" data-code="f3e6">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-tap-and-play zmdi-hc-fw"></i>
                          <span>tap-and-play</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="vibration" data-code="f3e7">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-vibration zmdi-hc-fw"></i>
                          <span>vibration</span>
                        </a>
                      </div>
                      <div class="col-sm-4 pt-1 pb-1" data-name="voicemail" data-code="f3e8">
                        <a href="#" class="color-dark">
                          <i class="mr-1 zmdi zmdi-voicemail zmdi-hc-fw"></i>
                          <span>voicemail</span>
                        </a>
                      </div>
                    </div>
                  </section>
                </section>
              </div>
              <!-- ms-paper-content -->
            </div>
            <!-- col-lg-9 -->
          </div>
          <!-- row -->
        </div>
        <!-- ms-paper -->
      </div>
      <!-- container -->
      <aside class="ms-footbar">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 ms-footer-col">
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Sitemap</h3>
                <ul class="list-unstyled ms-icon-list three_cols">
                  <li>
                    <a href="index.html">
                      <i class="zmdi zmdi-home"></i> Home</a>
                  </li>
                  <li>
                    <a href="page-blog.html">
                      <i class="zmdi zmdi-edit"></i> Blog</a>
                  </li>
                  <li>
                    <a href="page-blog.html">
                      <i class="zmdi zmdi-image-o"></i> Portafolio</a>
                  </li>
                  <li>
                    <a href="portfolio-filters_sidebar.html">
                      <i class="zmdi zmdi-case"></i> Works</a>
                  </li>
                  <li>
                    <a href="page-timeline_left2.html">
                      <i class="zmdi zmdi-time"></i> Timeline</a>
                  </li>
                  <li>
                    <a href="page-pricing.html">
                      <i class="zmdi zmdi-money"></i> Pricing</a>
                  </li>
                  <li>
                    <a href="page-about.html">
                      <i class="zmdi zmdi-favorite-outline"></i> About Us</a>
                  </li>
                  <li>
                    <a href="page-team2.html">
                      <i class="zmdi zmdi-accounts"></i> Our Team</a>
                  </li>
                  <li>
                    <a href="page-services.html">
                      <i class="zmdi zmdi-face"></i> Services</a>
                  </li>
                  <li>
                    <a href="page-faq2.html">
                      <i class="zmdi zmdi-help"></i> FAQ</a>
                  </li>
                  <li>
                    <a href="page-login2.html">
                      <i class="zmdi zmdi-lock"></i> Login</a>
                  </li>
                  <li>
                    <a href="page-contact.html">
                      <i class="zmdi zmdi-email"></i> Contact</a>
                  </li>
                </ul>
              </div>
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Subscribe</h3>
                <p class="">Lorem ipsum Amet fugiat elit nisi anim mollit minim labore ut esse Duis ullamco ad dolor veniam velit.</p>
                <form>
                  <div class="form-group label-floating mt-2 mb-1">
                    <div class="input-group ms-input-subscribe">
                      <label class="control-label" for="ms-subscribe">
                        <i class="zmdi zmdi-email"></i> Email Adress</label>
                      <input type="email" id="ms-subscribe" class="form-control"> </div>
                  </div>
                  <button class="ms-subscribre-btn" type="button">Subscribe</button>
                </form>
              </div>
            </div>
            <div class="col-lg-5 col-md-7 ms-footer-col ms-footer-alt-color">
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title text-center mb-2">Last Articles</h3>
                <div class="ms-footer-media">
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">Lorem ipsum dolor sit expedita cumque amet consectetur adipisicing repellat</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">Design</a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">Labore ut esse Duis consectetur expedita cumque ullamco ad dolor veniam velit</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">News</a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">voluptates deserunt ducimus expedita cumque quaerat molestiae labore</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">Productivity</a>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-5 ms-footer-col ms-footer-text-right">
              <div class="ms-footbar-block">
                <div class="ms-footbar-title">
                  <span class="ms-logo ms-logo-white ms-logo-sm mr-1">M</span>
                  <h3 class="no-m ms-site-title">Material
                    <span>Style</span>
                  </h3>
                </div>
                <address class="no-mb">
                  <p>
                    <i class="color-danger-light zmdi zmdi-pin mr-1"></i> 795 Folsom Ave, Suite 600</p>
                  <p>
                    <i class="color-warning-light zmdi zmdi-map mr-1"></i> San Francisco, CA 94107</p>
                  <p>
                    <i class="color-info-light zmdi zmdi-email mr-1"></i>
                    <a href="mailto:joe@example.com">example@domain.com</a>
                  </p>
                  <p>
                    <i class="color-royal-light zmdi zmdi-phone mr-1"></i>+34 123 456 7890 </p>
                  <p>
                    <i class="color-success-light fa fa-fax mr-1"></i>+34 123 456 7890 </p>
                </address>
              </div>
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Social Media</h3>
                <div class="ms-footbar-social">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-youtube">
                    <i class="zmdi zmdi-youtube-play"></i>
                  </a>
                  <br>
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-instagram">
                    <i class="zmdi zmdi-instagram"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-github">
                    <i class="zmdi zmdi-github"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>
      <footer class="ms-footer">
        <div class="container">
          <p>Copyright &copy; Material Style 2017</p>
        </div>
      </footer>
      <div class="btn-back-top">
        <a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised ">
          <i class="zmdi zmdi-long-arrow-up"></i>
        </a>
      </div>
    </div>
    <!-- ms-site-container -->
    <div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
      <div class="sb-slidebar-container">
        <header class="ms-slidebar-header">
          <div class="ms-slidebar-login">
            <a href="javascript:void(0)" class="withripple">
              <i class="zmdi zmdi-account"></i> Login</a>
            <a href="javascript:void(0)" class="withripple">
              <i class="zmdi zmdi-account-add"></i> Register</a>
          </div>
          <div class="ms-slidebar-title">
            <form class="search-form">
              <input id="search-box-slidebar" type="text" class="search-input" placeholder="Search..." name="q" />
              <label for="search-box-slidebar">
                <i class="zmdi zmdi-search"></i>
              </label>
            </form>
            <div class="ms-slidebar-t">
              <span class="ms-logo ms-logo-sm">M</span>
              <h3>Material
                <span>Style</span>
              </h3>
            </div>
          </div>
        </header>
        <ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
          <li class="card" role="tab" id="sch1">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc1" aria-expanded="false" aria-controls="sc1">
              <i class="zmdi zmdi-home"></i> Home </a>
            <ul id="sc1" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch1">
              <li>
                <a href="index.html">Default Home</a>
              </li>
              <li>
                <a href="home-generic-2.html">Home Black Slider</a>
              </li>
              <li>
                <a href="home-landing.html">Home Landing Intro</a>
              </li>
              <li>
                <a href="home-landing3.html">Home Landing Video</a>
              </li>
              <li>
                <a href="home-shop.html">Home Shop 1</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch2">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc2" aria-expanded="false" aria-controls="sc2">
              <i class="zmdi zmdi-desktop-mac"></i> Pages </a>
            <ul id="sc2" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch2">
              <li>
                <a href="page-about.html">About US</a>
              </li>
              <li>
                <a href="page-team.html">Our Team</a>
              </li>
              <li>
                <a href="page-product.html">Products</a>
              </li>
              <li>
                <a href="page-services.html">Services</a>
              </li>
              <li>
                <a href="page-faq.html">FAQ</a>
              </li>
              <li>
                <a href="page-timeline_left.html">Timeline</a>
              </li>
              <li>
                <a href="page-contact.html">Contact Option</a>
              </li>
              <li>
                <a href="page-login.html">Login</a>
              </li>
              <li>
                <a href="page-pricing.html">Pricing</a>
              </li>
              <li>
                <a href="page-coming.html">Coming Soon</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch4">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc4" aria-expanded="false" aria-controls="sc4">
              <i class="zmdi zmdi-edit"></i> Blog </a>
            <ul id="sc4" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch4">
              <li>
                <a href="blog-sidebar.html">Blog Sidebar 1</a>
              </li>
              <li>
                <a href="blog-sidebar2.html">Blog Sidebar 2</a>
              </li>
              <li>
                <a href="blog-masonry.html">Blog Masonry 1</a>
              </li>
              <li>
                <a href="blog-masonry2.html">Blog Masonry 2</a>
              </li>
              <li>
                <a href="blog-full.html">Blog Full Page 1</a>
              </li>
              <li>
                <a href="blog-full2.html">Blog Full Page 2</a>
              </li>
              <li>
                <a href="blog-post.html">Blog Post 1</a>
              </li>
              <li>
                <a href="blog-post2.html">Blog Post 2</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch5">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc5" aria-expanded="false" aria-controls="sc5">
              <i class="zmdi zmdi-shopping-basket"></i> E-Commerce </a>
            <ul id="sc5" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch5">
              <li>
                <a href="ecommerce-filters.html">E-Commerce Sidebar</a>
              </li>
              <li>
                <a href="ecommerce-filters-full.html">E-Commerce Sidebar Full</a>
              </li>
              <li>
                <a href="ecommerce-filters-full2.html">E-Commerce Topbar Full</a>
              </li>
              <li>
                <a href="ecommerce-item.html">E-Commerce Item</a>
              </li>
              <li>
                <a href="ecommerce-cart.html">E-Commerce Cart</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch6">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc6" aria-expanded="false" aria-controls="sc6">
              <i class="zmdi zmdi-collection-image-o"></i> Portfolio </a>
            <ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6">
              <li>
                <a href="portfolio-filters_sidebar.html">Portfolio Sidebar Filters</a>
              </li>
              <li>
                <a href="portfolio-filters_topbar.html">Portfolio Topbar Filters</a>
              </li>
              <li>
                <a href="portfolio-filters_sidebar_fluid.html">Portfolio Sidebar Fluid</a>
              </li>
              <li>
                <a href="portfolio-filters_topbar_fluid.html">Portfolio Topbar Fluid</a>
              </li>
              <li>
                <a href="portfolio-cards.html">Porfolio Cards</a>
              </li>
              <li>
                <a href="portfolio-masonry.html">Porfolio Masonry</a>
              </li>
              <li>
                <a href="portfolio-item.html">Portfolio Item 1</a>
              </li>
              <li>
                <a href="portfolio-item2.html">Portfolio Item 2</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="link" href="component-typography.html">
              <i class="zmdi zmdi-view-compact"></i> UI Elements</a>
          </li>
          <li>
            <a class="link" href="page-all.html">
              <i class="zmdi zmdi-link"></i> All Pages</a>
          </li>
        </ul>
        <div class="ms-slidebar-social ms-slidebar-block">
          <h4 class="ms-slidebar-block-title">Social Links</h4>
          <div class="ms-slidebar-social">
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-facebook">
              <i class="zmdi zmdi-facebook"></i>
              <span class="badge-pill badge-pill-pink">12</span>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-twitter">
              <i class="zmdi zmdi-twitter"></i>
              <span class="badge-pill badge-pill-pink">4</span>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-google">
              <i class="zmdi zmdi-google"></i>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-instagram">
              <i class="zmdi zmdi-instagram"></i>
              <div class="ripple-container"></div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/plugins.min.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/configurator.min.js"></script>
    <script>
      (function(i, s, o, g, r, a, m)
      {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function()
        {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
      ga('create', 'UA-90917746-2', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>